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” />
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.
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 :
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.
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.
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.
Sometimes there are files on a hosted server which can not be deleted by FTP even if you are logged in as the domain administrator. This happens for example when you upload a file using PHP. These files will be marked as being owned by the Apache (or Fast-CGI) user. So when you log into the FTP or the Plesk or Confixx desktop with your own user id, you can’t delete or change the files PHP has uploaded as they are owned by another user.
The only way to delete or change these files is to do it by a PHP script. In PHP you delete files by calling the unlink function.
To delete the file test.txt we simply run a PHP script that is located in the same directory.
<?php
$myFile = “test.txt”;
unlink($myFile);
?>
I had this problem a few days ago when I tried to delete an old wordpress installation on a server and it was not possible to delete the uploads folder cretaed by the wordpress application.
Last update : July 2, 2013
Web Robots (also called crawlers, wanderers or spiders) are programs that traverse many pages in the World Wide Web by recursively retrieving linked pages. For various reasons web robots are not always welcome to access certain web pages.
Googlebot
A simple method used to exclude web robots from a server is to create a file on the server which specifies an access policy for robots. This file must be accessible via HTTP on the local URL “/robots.txt”. The contents of this file uses two records: user-agent and disallow.
It is not an official standard backed by a standards body, or owned by any commercial organisation. It is not enforced by anybody, and there no guarantee that all current and future web robots will use it. Consider it a common facility the majority of web robot authors offer the WWW community to protect web servers against unwanted accesses by their robots.
The latest version of the robots.txt document can be found on http://www.robotstxt.org/orig.html.
Another way to tell web robots what to do is the use of meta tags index and follow. Informations about these meta tags are available at the metatags.info website.
Examples :
index the whole website
<meta name="robots" content="index, follow" />
index the current page and stop there
<meta name="robots" content="index, nofollow" />
ignore the current page, but crawl the other web pages
<meta name="robots" content="noindex, follow" />
ignore the whole website
<meta name="robots" content="noindex, nofollow" />
There are more robot meta tags. Sometimes search engines uses descriptions from the ODP (Open Directory Project) as the title and snippet for a web result. The tag noodp lets you opt out of the ODP title and description. The tag noydir does the same for the Yahoo directory. The tag noarchive prevents serach engines from showing the cached link for a page. The tag nosnippet prevents a snippet from being shown in the search results. The tag noimageindex lets you specify that you do not want your page to appear as the referring page for an image that appears in Google search results.
Doodle makes it easy to find a date and time for a group event. Doodle is a free online coordination tool which requires neither registration nor software installation. I used it today for the first time. It’s very user friendly and useful. Doodle is also available as Facebook application.
Default Tax Class :
To set a default Tax Class for new-products, find out the tax class ID number in Admin> Locations/Taxes> Tax Classes and enter this ID in the field Product Price Tax Class Default – When adding new products? in the Admin> Catalog> Product Types menu.
Weights and Prices attributes:
Attribute Prices can be entered with a prefix of + or – or blank
Weight can be entered optionally if it effects the product weight with a prefix of + or – or blank
The prefixes are set in the attributes_controller webpage :
ZenCart Attributes
Attribute flags:
The default values for the attribute flags on the attributes_controller webpage (see image above) are set with the following options on the product type info layout webpage :
Making a website available in multiple languages is important, especially if the target audience is international. Google offers two types of solutions to the Translation challenge. One is by straight online translation via a handy translation widget. The second solution is the Google AJAX Language API.
With the AJAX Language API, it’s possible to translate and detect the language of blocks of text within a webpage using only Javascript. With the AJAX Language API for Transliteration, it’s possible to enable transliteration on any textfield or textarea in a webpage. Transliteration is the process of phonetically converting a word written in one script into another. Transliteration should not be confused with translation, which involves a change in language while preserving meaning. With transliteration, it is the sound of the words that are converted from one alphabet to the other.
Code examples are available at the Google AJAX API’s Playground. A useful tutorial how to add inline language translation to a website with Google AJAX API has been written by Amit Agarwal.