Category Archives: Web Development

HTML, Web Development

Using META TAG Refresh to redirect

1 Comment

There are several ways to do a page refresh or redirect it to a new one. It can be done in the client side, with HTML or a script language, or in the server side with PHP or in the server configuration directly. The most simple way is using the HTML to tell to the browser what to do, using a meta tag. Besides, the are many simple hosting services that don’t support server side scripting or don’t let clients to change the servers configuration (in apache this can be done with an .htaccess file).

This feature can be very helpful, besides it’s very easy to use. Imagine that we have a website with several languages organized in a folder structure with the language codes. We’ll need to redirect the visitor to the default language. This can easily be done with meta tag refresh.

META tag syntax

The syntax of the refresh META tag is very simple.

<META http-equiv=”refresh” content=”<time>[;URL=<new url>”]>

  • The time, in seconds, represents the time that the browser will wait before refresh the page or redirect it to another one. If you set it to 0 (zero), the browser will redirect to the page without waiting. This use disable the back button of the browser, it behave like there is no initial page and only the one that we redirect the visitors to;
  • The url is an optional parameter. With this parameter we can define the URL of the page that will be loaded by the browser, this is the page that you want the visitor to redirect;

Examples

  1. Using the META tag to refresh or reload the site every one minute (60 seconds)
    <meta http-equiv=”refresh” content=”60″>
     
  2. Using the META tag to redirect to a new page without waiting.
    <meta http-equiv=”refresh” content=”0;url=en/index.html”>
     
  3.  Using the META tag to redirect to a new page after 2 minutes (120 seconds).
    <meta http-equiv=”refresh” content=”120;url=en/index.html”>

Things you must be aware

This META tag is an easy way of doing a refresh or a redirect. However, it has some disadvantages.

  • Using this method to redirect a page to another the crawlers, like Google bot, won’t keep your page rank in the new page. To do that you need to send a 301 redirect either with server script or the server configuration;
  • If the time defined in the META tag refresh is too small, some old browser with a slower connection can disable the browsers back button, even if you don’t define 0;
  • The use of the META tag refresh to reload or redirect a page should be done carefully in terms of usability. Some visitors may think that your site can be a security threat or simply be hungry about seeing the page reloads while he is reading it.

If you are developing a website according to the standard XHTML 1.0 you’ve to use the tag like following:

<META http-equiv=”refresh” content=”<time>[;URL=<new url>”] />

PHP, Web Development

Clean file name in PHP with Regular Expressions

5 Comments

In Web developing there are some main features and many concerns that we all must be aware. The file uploading is one of the important and indispensible features that we certainly will use sooner or later.

I’m sure that many of you have had troubles when uploading files that have names with special chars, especially if we run our application in a Linux SO. In fact, using Linux we have to be aware of case sensitive names and special chars. In Windows, we usually don’t have this problem and we can name our files without many limitations. This problem has a higher importance in Latin countries like mine (Portugal), here is normal to name files like “Activação Telefónica.doc”.

So, I decided to code a simple function that cleans the file name and post it here to be sure that when I need it again I known were this little simple but useful function is. I use the PHP function preg_replace to replace special chars with standard ones. This is only an example and don’t clean all special chars. You should add more chars to the filter by simple adding more arrays to the cleaner one. See the function bellow:


<?
$txt = "Activação Telefónica.jpg";

function cleanFileName( $str )
{
$cleaner = array();
$cleaner[] = array('expression'=>"/[àáäãâª]/",'replace'=>"a");
$cleaner[] = array('expression'=>"/[èéêë]/",'replace'=>"e");
$cleaner[] = array('expression'=>"/[ìíîï]/",'replace'=>"i");
$cleaner[] = array('expression'=>"/[òóõôö]/",'replace'=>"o");
$cleaner[] = array('expression'=>"/[ùúûü]/",'replace'=>"u");
$cleaner[] = array('expression'=>"/[ñ]/",'replace'=>"n");
$cleaner[] = array('expression'=>"/[ç]/",'replace'=>"c");

$str = strtolower($str);
$ext_point = strripos($str,”.”); // Changed to strripos to avoid issues with ‘.’ Thanks nico.
if ($ext_point===false) return false;
$ext = substr($str,$ext_point,strlen($str));
$str = substr($str,0,$ext_point);

foreach( $cleaner as $cv ) $str = preg_replace($cv[“expression”],$cv[“replace”],$str);

return preg_replace(“/[^a-z0-9-]/”,”_”,$str).$ext;
}

echo cleanFileName( $txt );
?>

I hope that this function will be useful to you.

Browsers, CSS, HTML, JavaScript, Web Development

Show PNG transparency in IE6

3 Comments

Every web developer knows that develop cross-browsers web applications is a real pain in the ass. To complicate the things a little bit, the change from IE6 to IE7 bring many differences that turn the develop process harder.

One key limitation in the old Internet Explorer 6 (IE6) is the Portable Network graphics (PNG) transparency problem. In this version of IE, pages that contain PNG images with transparent background are shown wrong. The background of the image is shown gray rather than transparent.

To solve this problem Microsoft recommends that web developers use the AlphaImageLoader filter. This is specific IE CSS filter that can be used with images to show the PNG transparency. The filter can be used as shown below:

<html>
<head>Show PNG transparency in IE6</head>
<body style=”background-color:#FFFFFF;”>
<!– Div that handles the transparent image –>
<div style=”height:400; width:400;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
src=’image.png’, sizingMethod=scale);” >
</div>
</body>
</html>

AlphaImageLoader has two parameters, the src and the sizingMethod. The first one is used to set the source image file to be filtered and the second one is used to set the sizing behavior that the object and the image have. The sizingMethod can take three values:
crop – Clips the image to fit the dimensions of the object;
image – Default. The object fits the dimensions of the image;
scale – The images changes its size to fill the object;

This CSS filter can be used as an object in JavaScript. This way, there is another property called enabled to set or disable the filter.

Form more information about AlphaImageLoader filter check MSDN website.

PHP, Web Development, XpertMailer

Send e-mail with inline image attachment

1 Comment

Since I start coding in PHP that one of the key feature were send and simple e-mail by a form. This can be done with many API’s that exist to work with the e-mail system. With the evolution of the Internet, sending e-mails with a design and not only with text has become to be normal and widely used. I’ve used many solutions like php mailer, xpert mailer, version 2 and 4, code igniter e-mail class, but still using the version 2 of xpert mailer, also known as XPM2.This older version, already with lack of support by its developers is simpler and easier to include in one project and do everything I need to send e-mail, from normal text based e-mail to rich content e-mail in html and attachments.

There are many ways for doing that by using html e-mails. This task isn’t as simple as it looks like, because html e-mail has some limitations and some rules that we can’t break if we want to see our e-mail well formed. One of the principal limitations is use a table based layout instead of a div one.

While using rich e-mails we face some difficulties and issues. The way we put images on the html e-mail is important. We’ve to choices to doing that.

  1. The first one is use full path to an image that is store in a web server accessible everywhere. This has some problems because we may not have space on a web server to put the files. Another problem is the limitation of the domain. If we want to change our domain or use our script in another one, we’ve to change all image and file path.
  2. Another way to put files on the e-mail, especially images, is putting them inline of the e-mail like an embed attachment. This solves the problems described but is much hard to use and to understand. Some API’s are simplifying the programmers work by offering a simpler to use Mime content inside an e-mail. The XPM2 have this feature and turns it simply to use when we do it right.

The code shown below is simple and sends an example e-mail with an inline image.

// XPM2 with attach inline example
require(“xpm2-0.1/smtp.php”);

// Create XPM instance
$mail = new smtp();

// Select delivery mode
$mail->Delivery(‘local’);

// Set timeout
$mail->TimeOut(10);

// Set e-mail priority
$mail->Priority(‘Normal’);

// Set from e-mail
$mail->From(“test@ws4.org”,”Test”);

// Set to e-mail
$mail->addTo(“protech@ws4.org”,”ProTech”);

// Set body content has HTML dining is encoding
$mail->Html(‘<html><head><title>Test</title></head><body>Test<br /><img src=”image.jpg” alt=”Inline image” /></body></html>’,’ISO-8859-1′, ‘base64’);

// Attach file to the e-mail
$mail->AttachFile(‘image.jpg’, false, ‘autodetect’, ‘inline’ );

// Send e-mail and set the subject and it’s encoding
$sent = $mail->Send(‘Hello World!’,’ISO-8859-1′, ‘base64’);

// Check the status and see the result if error
echo $sent ? ‘Success’ : $mail->result;

The method attach file is used to add files to the e-mail, either as a normal attachment and an inline one. If we see the parameters we find a disposition that allows us to define the type of attachment. Using the second parameter we can set a name or use the full file name. Is this example, I attach an image as inline content and use it in html. It’s so easy and clean.

This API also allow you to choose the better way to send your e-mails using local, relay and client letting you use your servers e-mail layer or connecting to an SMTP server. Other feature is the possibility to connect to a throw POP3.

See the documentation about XPM2

I haven’t use the XPM4 because I had some header encoding issues and haven’t tried to fix the problem yet. Besides, I still use XPM2 because allows sending e-mail the way I like and is too small and easy to deploy and integrate with some frameworks, like Code Igniter.

JavaScript, Web Development

Detect cookie support with JavaScript

Leave a comment

Cookies, also known as web cookies, HTTP Cookies or just cookies, are a mechanism that allow the store of that in the client’s browser. This information is sent by a server to the web browser and then sent back without change each time the browser access that server. Cookies are used for several purposes such authentication, tracking or just to hold specific information, such users preferences in a web site. The idea and name was inspired in the well-known concept “magic cookie” from UNIX.

This mechanism is so common between developers that most of the times we forget to check the client browser support for them. When we develop an application that uses cookies we must check their support to avoid some errors. This can be done in several ways, such with server side scripting. The code bellow shows a simple way to check cookies support with JavaScript.

<script type=”text/javascript”>
var cookiesON = false;
if (typeof navigator.cookieEnabled==”undefined”)
{
//if other than IE4+ and NS6+
var date = new Date();
document.cookie = “checkCookie=”+date.getTime();
cookiesON = (document.cookie.indexOf(“checkCookie”)!=-1)? true : false
}
else
{
//if IE4+ or NS6+
cookiesON = (navigator.cookieEnabled)? true : false;
}

//Do something
if (cookiesON)
alert(‘Cookies ON’);
else
alert(‘Cookies OFF’);
</script>

One problem that comes with the web development is the need to develop cross-browser applications. This way, in the above code you see two different ways of check cookie support in JavaScript.

  • The first one checks cookies on browsers different from IE4+ and NS6+ by trying to put a dummy value in the cookie and read it. If we could read it, is because cookies are enabled. There is no problem by storing the dummy value because this one is removed when the browser is closed. This is the behavior when isn’t specified a expire date.
  • We could use the same verification for all browsers. However, browsers like IE4+ or NS6+ have the cookie support information built-in with a navigator property “cookieEnabled”.
HTML, SEO, Web Development, Wordpress

WordPress blogs SEO

5 Comments

Today there are so many blogs that if you want to let people know that you have one, you must try to optimize it. Sometimes this optimization is right in front of our eyes and small changes can make a difference. In this post i’ll give some advice to improve your wordpress blogs index position in search engines. However, this are not proved actions to improve blog indexing, but are some SEO improvements discussed in SEO world.

Permalinks

Permalink is the permanent URL of your blog pages. This is the URL that visitors will see and that other web bloggers can use to refer a post of your blog. WordPress allow the configuration of the URL format. It offers different options, some of then very ugly and not well accepted by search engines. However, you can define your own format. This way you can either have a good and simple URL and a format that the spiders (search engines bots) like and extract your keywords from it.

The format that i choose to my blog and that i recommend is the “/%category%/%postname%”. The result is a simple and friendly URL that is parsed by the spiders. This bots get the keywords in the URL using them to define your pages value. If you’ve a URL with the date of the post or with a code what the meaning of the URL?

Visit WordPress permalink page

Post and category slug

To complete the benefit of permalinks, the WordPress allows you to choose the name that appear in the URL for each post or category. With post and category slugs you can define a much friendly URL. By default, the WordPress put your post title separated with ‘-‘. Some keywords are not necessary and can be removed. This way you can define your category and post parts of the URL format defined above.

Meta Tag

Another step to improve your blog value to the spiders, is defining some meta tags. Beside the definition of the page title, one of the most important information, we must define the description, the keywords, and other tags.

Bold fields

Some SEO professionals says that we must put strong tags on the keywords that we want to highlight either to the users an to the spiders.