PHP foreach loop

A foreach loop can be used in PHP  with an array instead of a counter. If an array contains 5 pieces of data, then the foreach loop would execute 5 times.

A foreach loop is phrased like this: foreach (array as value) { what to do; }

Here is an example of a foreach loop:

<?php
$a = array(1, 2, 3, 4, 5);
foreach ($a as $b)
{
echo $b;
echo (‘<br/>’);
}
?>

Authentification

Authentication is a process for identifying and verifying who is sending a request. The following list shows a simplified version of an authentication process :

  • The sender obtains the necessary credential.
  • The sender sends a request with the credential to the recipient.
  • The recipient uses the credential to verify the sender truly sent the request.
  • If yes, the recipient processes the request. If no, the recipient rejects the request and responds accordingly.

Amazon® Product Advertising API with signed requests

By August 15, 2009, all calls to the Amazon® Product Advertising API must be signed to authenticate the request. Ulrich Mierendorff developped a simple function in PHP that lets you make authenticated requests with only a few lines of code. He is also the author of “Antialiased filled Arcs/Ellipses” for PHP and of the rounded css boxes.

Other PHP example for Amazon signed requests have been posted by Mark on his blog “Every Good Path” and by Horacix on his blog “Inside Things“.

Amazon’s guidelines for signing requests are available on the AWS website.

The following error messages are sent:

  • the timestamp is old : Request has expired

Meta tags and web search

Meta tags provide information to all sorts of clients, such as browsers and search engines. A useful contribution how Google interprets meta tags has been published on the Webmaster Central Blog (Official news on crawling and indexing sites for the Google index). Another contribution provides hints how to create good descriptions.

A script how to create dynamic META descriptions for a WordPress Blog has been published by Darren Pangan on his blog. A useful contribution about the meta description tag has been published by Christopher Heng. A script how to extract and display meta tags is available at stackoverflow website.

The standalone XML-sitemap generator provides an option to display the meta description tags in the custom sitemap list.

ShareThis makes sharing easy!

ShareThis is a free one-step sharing tool that saves you time and makes sharing online hassle free. You can share anything on the web to your choice of social bookmarking options, post-to-profile and blog choices, Email, AIM, or even as a text message to a mobile phone.
The ShareBox is a place where registered ShareThis users’ shared content is stored. If you want to retrieve something you have shared in the past, share it again or would like to tag and organize your shares, this can all be done within the ShareBox. In addition, users can save and tag content directly to their ShareBox from within the widget for easy searching later.

I created today a ShareThis account to include the ShareThis widget to my WordPress websites.

class = “notranslate”

Google Translate Widget

Google Translate Widget

If you use the Google Translate widget on your webpages, sometimes there may be some content that you don’t want to translate. You can add class=”notranslate” to any HTML element to prevent that element from being translated. If you have an entire page that should not be translated, you can add:

<meta name=”google” value=”notranslate” />

Prevent caching of dynamically added iframes

I wanted to insert an iframe in a webpage, chosen at random among the files panel_1.html, panel_2.html, panel_3.html.

I first tried to setup the iframe with JavaScript at onload with innerHTML or with document.write in a div container called “content”. An example is shown herafter:

var i = 1 + Math.round(Math.random()*(2));

document.getElementById(‘content’).innerHTML='<iframe src=”panel_’ +i +’.html” width=”100%” height=”100%”></iframe>’;

These solutions worked as expected in the Google Chrome browser, but there were problems either with the Firefox browser or with the IE browser due to caching problems. The iframe was not refreshed despite changing the src data in the iframe tag.

Most proposals found on the web with a Google search did’nt solve the problem on all browsers. By setting the src of the Iframe instead of changing the innerHTML of its container as shown hereafter the iframes are refreshed in the 3 browser’s IE, Firefox and Chrome.

<iframe id=”mypanel” src=”about:blank” width=”100%”
height=”100%” ></iframe>
<script type=”text/javascript”>
var i = 1 + Math.round(Math.random()*(2));
document.getElementById(‘mypanel’).src=’panel_’+i+’.html’
</script>

I would like to add that by using the <object> tag insted of the <iframe> tag, cross-browser problems are even worse.

HTML client-side image maps

Last update : June 24, 2014

You can create different clickable areas within an image using the usemap attribute together with the map tag. The usemap attribute of the img tag points to an map tag containing a description of the clickable areas that the map is divided into. The map tag has a id attribute to define its name, and also declares which areas are clickable by using the area tags.

An example of HTML code is shown below :

<img src="image.jpg"
	width="150"
	height="70"
	usemap="#mymap">
<map id="mymap">
	<area shape="rect"
		   href="start.html"
		   coords="0,0,48,28"
                   alt="blablabla" />

	<area shape="circle"
		   href="previous.html"
		   coords="50,30,10"
                   alt="blablabla" />

	<area shape="poly"
		   href="next.html"
		   coords="60,50,80,30,100,40,50,100"
                   alt="blablabla" />
</map>

The coordinates for the different shapes are :

  • rect (rectangle) : top left x, y ; bottom right x, y
  • circle : center x, y ; radius
  • poly (polygon) : list of x, y coordinates, separated by commas

In XHTML 1.0, the “usemap” attribute in the “img” element is defined as being a URI. This means that # (pound sign) can be used, as it specifies a link to a ‘fragment identifier’ in the current page. For the “map” element, the “id” attribute is required. In XHTML 1.1, the “usemap” attribute for the “map” element is an IDREF rather than a URI. This means that this value must be the same value as the “id” attribute of the other element.

The problem is that the valid code does’nt work in all browsers. If you want an image map that functions, you must write invalid XHTML 1.1 code. More infos about this topic are available at the Randsco website.

The name tag is required besides the id tag for the Firefox and Chrome browser’s. To embed a usemap in another HTML page, the object tag returns a wrong URL with embedded links. A workaround is to use iframes which work in most browsers.

ISMAP is part of the old-fashioned way of making image maps which originally required a server-side file as well as the HTML in the page.

We can add events (that can call a javascript) to the tags inside the image map. The tag supports the onClick, onDblClick, onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut, onKeyPress, onKeyDown, onKeyUp, onFocus, and onBlur events.

A code example is shown hereafter :

<area shape =”circle” coords =”90,58,3″
onMouseOver=”writeText(‘The mouse is inside the circle.’)”
href =”about.html” target =”_blank” alt=”Blablabla” />

A useful program to set up image maps is Mapedit 4.0 5 from Boutell.com.

Unobtrusive JavaScript

The following HTML code shows the basics of modern javascript programming :

<html>
<head>
<script type=”text/javascript” src=”helloworld.js”></script>
</head>
<body>
<p id=”hello”></p>
</body>
</html>

The concept is to keep the javascript separate from the HTML of the web page and to just use a script tag in the head section of the webpage to link the two together. An id tag is used to identify the part of the body of the web page that should be updated with javascript.

The javascript code is shown below :

function sayHello() {
document.getElementById(‘hello’).innerHTML = ‘Hello World’;
}
window.onload = sayHello;

In the past the function document.write() was used for this purpose, but this is “bad form” and not valid xhtml code. To adhere to strict xhtml code, then it would be better to create elements using document.createElement and element.appendChild (and other native DOM node manipulation functions). For inserting text into an existing element, innerHTML is still acceptable code (and completely cross-browser). The “all DOM” way requires a lot of extra code, is slower, harder to maintain than simpler method and it needs more bandwidth.

“alt” and “title” attributes for images

The alt attribute is designed to be an alternative text description for images. alt text displays before the image is loaded. It is a required element for images and can only be used for image tags.

In contrast, the title attribute can be used for any page element, but it isn’t required for any page element. Many search engine ranking algorithms read the text in title attributes as regular page content.

In the past,  the alt text description was often used as a sort of pop-up tooltip on images. That was because the title attribute wasn’t widely supported. Today most browsers interpret the W3C specifications rather strictly – alt text no longer “pops up” when you run your mouse over an image. You have to use a title attribute for that.