Archive for the ‘Web Development’ Category

Putting Euro Symbol in Inner Text HTML using Javascript

Tuesday, July 6th, 2010

Had a problem today whereby I tried to insert a euro symbol into the innertext of a div using javascript.

First I tried the actual euro symbol

e.g.

document.getElementById('theelementid').innerText ="€" + value;

This results in the user agent outputting an unrecognised symbol in place of the euro

Then I tried using the html escape code for the euro symbol:

i.e.

document.getElementById('theelementid').innerText ="€" + value;

But that resulted in the € being displayed verbatim by the browser as the DOM automatically encodes special characters such as the ampersand

Finally, I actually escaped it using the unicode value

i.e.

document.getElementById('theelementid').innerText ="\u20AC" + value;

and it worked like a treat.

:-)

http://www.thejesusalien.com/michael-jackson-is-not-dead-hes-an-ancient-egyptian-princess/
  • Share/Bookmark

Centering a Website – Cross Browser

Wednesday, June 30th, 2010

Most sites these days are centred and have a fixed with be it 800, 1024 pixels wide or whatever.  If any of you have used divs and css and tried using standard centering you might have, at one stage or another, scratched your head while viewing it on different browsers.

Let’s say we want a webpage with a width of a nice round 1000 pixels. To do this we might create a new div within the body tag called page:

<body>
<div class="page">Content goes here<br/><br/><br/><br/><br/></div>
</body>

In order to centre this on IE7 and less we simply set the width in the div and in the body tag set text-align to center i.e.

body
{
 text-align: center;
}
.page
{
 width: 1000px;
 text-align: center; /*don't forget to reset alignment for child elements*/

}

On IE8+, Firefox and other browsers this is not correct behaviour however and they will left align the inner div, therefore we need to centre the inner div using the margin tag by setting it to margin: 0 auto e.g.

body
{
 text-align: center;

}
.page
{
 margin: 0 auto;
 text-align: left;
 width: 1000px;
 background-color:red;

}

By specifiying margin: 0 auto and by setting the div’s width, the browser can calculate how much distance to place between the left side of the div and the left margin of the browser window.

So there you have it, simple and effective and cross browser compatible.

  • Share/Bookmark

Flash Caching Issue on IE

Thursday, June 24th, 2010

I had a problem with a client of a client whereby they had a flash gallery component called simpleviewer on the site.  Basically depending on the page the browser viewed, the component would load up a dynamic xml file and present a different slideshow on each page.

The problem happened when users have caching turned to automatic.

I tried various things like, setting the various meta tags for browser caching in the head section of the html document

<META HTTP-EQUIV="Expires" CONTENT="0">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">

I tried setting this in the footer also because of IEs caching problem.

I then tried setting this sort of stuff on the server through php headers even setting the last modified date:

header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header ("Last-Modified: " . gmdate ("D, d M Y H:i:s") . " GMT");

I then tried setting parameters on the .swf file itself hoping that it would see it as a new request for a different swf file each time (where contentid is the id of the page loading).

var fo = new SWFObject("viewer.swf?unique=<?php echo $contentid ?>",
"viewer", "640", "380", "8", "#ffffff");

In the end i figured out that the flash file itself was caching the xml document that it was loading  so this had to be different for each page request (I had been using cookies to store the currently selected page). 

fo.addVariable("xmlDataPath",
"gallery.php?contentid=<?php echo $contentid ?>");

And low and behold, problem solved.

Talk about beating about the bush!

Anyway, hope this helps someone else out there.

  • Share/Bookmark

Double Home Page Problem Wordpress

Wednesday, March 3rd, 2010

Many of us Wordpress users will have come up with the double Home Page problem.

If you are using Wordpress to create a website often you want a static home page on the site and not have it default to the latest blog entry.  To do this you must log in to the admin area, go to setttings->reading and set a static page as your homepage.

Often times you will want to create this page and title it ‘Home’ however on most themes if you do this you will end up with two home pages.

To get around this, without editing the theme, you need to create a dummy static page that is hidden from public view.  Once this static page is created you must go back and edit the newly created home page and set its parent to this new dummy page.

And that should be it!

If you want to have your blogs appear on another page, simply create another static page (with no content) and again go to settings->reading and set the posts page to this page. You must do this before you make the dummy page private, however.

  • Share/Bookmark

New Look UTD Web Design Ireland

Thursday, January 21st, 2010
UTD Web Design Screenshot

UTD Web Design Screenshot

Just a quick post to let people know that I have just launched the new UTD Web Design Ireland website.

I felt the old site was a bit ‘templatey’ looking and wanted to get across the heart of my brand, which is quality, hand built websites. That’s where the idea for original diamond logo came from i.e. quality, hand cut etc.

I think the desktop gives a flavour of how I work with stimulants, sticky notes, pens, phone and blank cds at the ready.

I’ve made it so that a few of the items on the desktops are interactive, which just add a little bit extra to the site, they are implemented using an simple old image swap technique using transparent animated gif files.

The site is a simple html + css site with a basic home-brew content management system to allow me to add and update pages quickly as the need arises.  On the porfolio page I also employ a flash component to display the websites I’ve done,which I think looks quite nifty. This was purchased from Flashden.net.

I hope you like the new design.

  • Share/Bookmark

Changing Domains and 301 Redirects

Tuesday, November 10th, 2009

If you want to move your business to a new domain and you have a popular domain name with a decent Google Page rank you will most certainly want to redirect traffic from your old website to your new website.

There are many ways to do this. Some of the most popular are:

  • using meta tags: this is a client side method that redirects the browser after a certain amount of time
  • using a server side script: this could be a simple .php that redirects users from a page (generally homepage) to your new site
  • use a .htaccess file and a rule to redirect traffic to your new site

META REFRESH REDIRECT

The meta refresh mechanism is quite simple, you insert code like this into the header of the page you wish to redirect:

<META http-equiv=”refresh” content=”5;URL=http://www.yournewsite.com/”>

This will redirect to your new site 5 seconds after the page loads on the viewer’s browser.  This method is simple and require no server side scripting knowledge.

PHP 301 REDIRECT

With languages like php you can use the header function to redirect to other pages. Here is an example of how to perform a 301 redirect with php.

<?php
header( “HTTP/1.1 301 Moved Permanently” );
header(’Location: http://www.yournewsite.ie/’);
?>

NOTE: this code must appear at the top of the .php file as if the script echoes anything at all to the client the redirect will not work.

This method is good as it performs a proper 301 redirect so that your new site picks up all of the page rank associated with the old page, the only disadvantage here is that it must be done page by page.

This 301 has been tried and tested on http://www.utdwebdesign.com and redirects to http://www.utdwebdesignireland.com

.HTACCESS 301 REDIRECT

This is the preferred method of performing a 301 redirect for all pages of a site but only works on Linux hosting. Here is an example of a .htaccess file with a 301 redirect rule for all pages of a website:

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} !^yournewsite.com$ [NC]
RewriteRule ^(.*)$ http://www.yournewsite.com/ [L,R=301]

This .htaccess 301 Redirect has been tried and tested on Godaddy hosting for the website http://www.barrackstreetconcertband.com and redirects the user to http://www.barrackstreetband.com

  • Share/Bookmark

Transferring a .ie domain from one hosting provider to another

Tuesday, November 10th, 2009

Transferring a .ie domain is not as simple as a .com, however you can transfer a .ie domain without involving the web design company that registered it for you.

Generally with .ie domains you need to send in a scanned letter (on company headed paper) to the IEDR (IE Domain Registry) telling them that you want to transfer the domain to a new domain registrar. In order to do this you must be the original domain administrator (which the previous web design company you used should have set). If this person is not working at your company any more you can simply state this in the letter and specify a new administrative contact.

Domain transfer can be a little tricky and generally takes a few days to do, so if you want to do this make sure you give yourself plenty of time. It can take longer and more consideration if you have lots of email addresses that you need to transfer also.

Just take your time and be careful and get professional advice if you are not sure.

UTD Web Design Ireland provides such as service so don’t hesitate to contact them if you need assistance.

  • Share/Bookmark

Do I need a Content Management System (CMS)?

Tuesday, October 13th, 2009

The short answer is YES.

A Content Management System or CMS is a piece of software running on a hosting account on a web server that allows the administrator of a site to log in to and edit the site through a web browser interface, without having to delve into the mystifying depths of HTML and CSS code trying to work out how to FTP the files over to the hosting account etc.

Generally a CMS is made up of standard HTML and CSS elements, a MySQL database (or other database technology), a Javascript word processor/text editor and some server side scripts (PHP, ASP, JSP etc.) to execute database operations such as saving and retrieving content and to allow upload and management of files on the server.

Most design companies will give a customer the choice of installing a third party CMS such as Wordpress or their own bespoke CMS. However, design companies generally prefer to offer bespoke CMS to their customers because they can be tied into a specific design more easily, and the user interface can be made exceptionally foolproof. With third party CMS applications design can often be very restricted unless the company specialises specifically in that technology.

You should expect to pay a bit less for a Wordpress or Joomla website as there is practically no coding involved in the set up of these sites, rather developers will find a suitable template on the web and will then customise it to suit a particular customers needs. If a company has to develop a theme from scratch, Joomla and Wordpress sites can become even more expensive then their own bespoke CMS sometimes prohibitively so.

Regardless of the technology chosen, the major advantage of a CMS is that you will no longer need to call your web design company every time you need to make a small change to your website, with a CMS you can update the site whenever you have a bit of news, want to add a new link, need to upload a new picture, press release etc. etc. You just simply log in through to the CMS via a specific URL or Web Address and edit your website pages on the fly.

However, with this power there are also caveats. Often designers have a keen eye regarding making content on a site look professional. By transferring this power to administrators, the design of the site can often suffer over time from a design perspective as a result, so if you do go for a CMS try and keep the content true to the design of the site and avoid using your own colour schemes, font sizes etc.

Search Engine Optimisation is also generally supported by good CMS systems. They allow the user to modify the title of the page, the content of the page (encouraging the use of h1 tags) and they also allow the admin to add meta description information. Often with static web sites, design companies do not change the title and description on the various pages on the site which can lead to devastating penalties from Search Engines.

So, if you have an existing site without a CMS, don’t worry, all is not lost. If your site is standard HTML / CSS it should be relatively easy to add a CMS to.

UTD Web Design Ireland can add a lightweight, bespoke SEO optimised CMS to your existing site for as little as €400 depending on your specific requirements, so what are you waiting for, get in to the 21st century and manage your own website content today!

  • Share/Bookmark