Google Custom Search 1

Today I've been trying to set up a Google custom search on the site. Sounds simple doesn't it. It wasn't.

Actually setting up the custom search at Google was pretty straightforward. Integrating it into my site and getting the results to show up how I wanted them in a custom results page was not.

I've just about managed to get the search box how I want it in my title bar by cribbing various bits of other peoples code. I also have a results page. Now I need to edit this so that it sits with the rest of the site properly - tomorrow morning's first task.

The main thanks should go to Google employee Jeff S. His response to a query on a Google group 'Google AJAX Search APIs', item 4 on the page, is what finally made it all fall into place. Thanks Jeff.

His solution uses quite a bit of JAVA, which as yet I don't fully understand. But who cares, it works.

Stopping Spambots

All the following is the text from the webpage www.RichsWebArchive.com/aboutthissite/stoppingsmapbots/index.php and it reads as though you are viewing the actual page:

I was concerned about Spambots (evil programs which search web pages for email addresses so they can send you spam) harvesting my email address from the pages on the site.

(added 15.01.2011 - This method has been superseded by the new Pop-up Mail Form.)

I didn't want to do anything too complex just yet using forms or scripts. So the following line of code has made it's way into my site:

< a href='mailto:rich"_at_"richswebarchive"com
?subject=Site Objectives' title='replace "_at_"  
with the at sign and " with a dot.'> 
Send me a message about this page </a>

It looks more complex than it is. the mailto: address is enclosed in single quotes allowing you to pass through the double quotes inside them to the mail client. The user must then edit the email address as per the instructions in the title part of the tag - replace "_at_" with the at sign and " with a dot.

The text in the title part of the tag also shows up as a tool-tip when you hover over the link.
Hopefully anyone reading my site will be savvy enough to deal with this and the double quotes in the email address that gets passed to the mail client should be enough to fool the spambots into ignoring my address.

I fiddled with the CSS for mailto links with the following line:

a[href^="mailto"]:hover:after { 
content: " > please edit address"; }

This adds the text > please edit address after the link when the mouse rolls over the link. I also used the a[href^="mailto"]: selector to set the various colour states for the mailto tag as these are not set when you set the colours for normal links.

Once again, all the preceding text is from the webpage www.RichsWebArchive.com/aboutthissite/stoppingspambots/index.php and it reads as though you are viewing the actual page:

Site Logo

All the following is the text from the webpage www.RichsWebArchive.com/aboutthissite/logo/index.php and it reads as though you are viewing the actual page:

I wanted to set the logo for the site that comes up by the site name in browsers.

The first thing to do is create your logo. It needs to fit in a 16 x 16 pixel box, which is pretty damn small. I started by creating a 160 x 160 pixel .png file in Adobe Fireworks.

Then I found a great website that converts the .png file into the files you need, pops then in a .zip archive with instructions for how to use them. It gives you a static version and an animated one. I renamed one of these and put in the site's root directory.

Instead of putting the code line:

< link rel="shortcut icon" href="/rwaicon1.ico" > 

into every page on the site I decided to make a .inc file called sitewideheadcode.inc and I put the code in there. Then I put a php include to load sitewideheadcode.inc at the end of all the head sections in the code on each page.

So now i can easilly add code to the end of every head section on the site and my logo works. If I need to change the logo it's just one edit.

Once again, all the preceding text is from the webpage www.RichsWebArchive.com/aboutthissite/logo/index.php and it reads as though you are viewing the actual page:

Navigation Bar Links

Friday 7th January 2011

All the following is the text from the webpage www.RichsWebArchive.com/aboutthissite/navbarlinks/index.php and it reads as though you are viewing the actual page:

It occurred to me that the links in the navigation bar can and indeed should stay the same from page to page of the site. So I wanted to have 1 piece of code for the links which I could then call from any page I choose. Thus if I change a link I only need edit one file instead of many.

I wanted a method of importing html into html.

A quick Google search and a bit of reading led me to believe that using a php call include was the easiest way to go about things. It turns out that it was pretty simple too. More of an issue was being able to test pages containing php without having to upload them to a server and this is discussed in the My Sytsem page.

It was really easy to do. I copied the code for the links into a seperate file called navbarlinks.inc, which I saved in the site's root directory/folder. Only the code for the links, not their surrounding div tags. In place of the links in the main XHTML document I put the following line:

<?php include('../navbarlinks.inc'); ?>

This copies the code from navbarlinks.inc directly in it's place.

All that then remained to do was to change the extension of the index.htm file to .php. This tells servers to parse the page for php and translate it into html before they send the page to your browser. I had to upload the files to my server before I could tell if it worked.

Luckily this was one of those rare and joyous occasions where everything worked absolutely right first time. I then went on to getting the php to work locally. That took a bit more time, but it was free and pretty smooth.

Once again, all the preceding text is from the webpage www.RichsWebArchive.com/aboutthissite/navbarlinks/index.php and it reads as though you are viewing the actual page:

Site Objectives

Originally written on Friday 7th January 2011

All the following is the text from the webpage www.RichsWebArchive.com/siteobjectives/index.php and it reads as though you are viewing the actual page:

How much time is there? Eventually I need to earn some money and stop doing this. In the mean time though I hope the site will grow into several different sections coving the main technologies in use on the web.

To begin with I'm concentrating on XHTML and CSS and getting used to writing the code. Next up on this front is to write a form and have the information emailed to me. Maybe I'll try a bit of JAVA to validate the input.

Eventually I'll take a look at some server-side technologies, Perl and MySQL probably.

All the files and associated code for this site are freely available for downloading. You can do whatever you like with them. Generally I'll link a download to a particular page when I've finished it. One thing to be aware of is that these downloads are like a snapshot in time, and may not reflect the current state of the site.

I've found a friend who wants me to write a website for their business too. This is a fantastic opportunity to learn on a real job and earn some money too. I'll be documenting anything new and useful I learn along the way with that here too.

I have also made a companion blog to this website. The main articles here will be copied there but I'm also going to use it just to jot down small quick things I learn along the way.

Once again, all the preceding the text is from the webpage www.RichsWebArchive.com/siteobjectives/index.php and it reads as though you are viewing the actual page:

Introduction 2 - The Home Page

Originall written on Friday 7th January 2011

All the following is the text from the webpage www.RichsWebArchive.com/home/index.php and it reads as though you are viewing the actual page:

Hello, this website is here to document the process of learning how to program for the web in 2011.

It is intended that this site will develop into a useful reference for learning the various current technologies which come together to make the web what it is.

I worked in IT for about 8 years, finishing up with a 2 years at the BBC, roughly 20 years ago. Since then I've been a recording engineer and a cabinet maker. Don't try and be a cabinet maker in a recession, it really doesn't work - so I sold my tools and workshop and now I'm going to get back into working in IT.

I am an experienced Mac user. I used them exclusively and extensively both as an engineer and as a cabinet maker for the last 15 years. I've written a handful of websites in the past using Adobe Fireworks. Now I want to learn how to do it properly so I'm learning by typing the pure code - no wysywyg editors, only text. All files are produced in BBEdit on a Mac but any plain text editor on almost any computer will do. I highly recommend using a specialised code editor such as BBEdit as it makes your life infinitely easier.

What useful skill and experience do I have? I've done a fair amount of programming in the past: tons of stuff in a proprietary database language, I've written lots of Unix Shell Scripts, a bit of C++ and some object oriented C, and tons of BASIC. So hopefully I'm used to a lot of the concepts of programming. In terms of useful skills for programming for the web today though I don't know very much at all. I have a knowledge of the basic structure and syntax of XHTML and experience with a handful of tags, a similar level of knowledge about CSS (gained solely in the last few days) and a tiny bit of knowledge about JAVA.

A hell of a lot of learning is required. This page and hopefully several more like it are to document my learning, or re-learning of the necessary skills. I am interested in 'the mechanics' of what goes on with web pages more than 'web design'. Consequently don't expect to see lots of nifty graphics and effects. Hopefully you will see simple information presented clearly and accessibly.

I've been learning from two books and I should credit them here. HTML for the World Wide Web, 5th edition, Visual Quickstart Guide by Elizabeth Castro, Peachpit Press is the main one. This is a great book, now available in a 6th edition, well written, concise and easy to understand, I highly recommend this book. Also extremely useful is the HTML 4.01 Programmers Reference from WROX - a fantastic reference resource. Whilst both of these books are from 2003 much of their content is still valid and it's so easy to find new information on the web.

While using the site please be aware of the ability of your browser to show you the source code of any page you look at. In Firefox it is the Page Source option in the View menu, or the Apple-U key-stoke on a Mac. Many links on this site will take you to unformatted or blank pages - the intention is for you to view the source code.

Hopefully stepping through the pages in the order they're presented in the navigation bar should give you a fair idea, in chronological order, of how I've gone about building the site, and how you could build yours too. Eventually, when I'm happy with it, I'll make a downloadable template of the site.

A note about file names and file-extension conventions used in this site. All main pages are called index.php and are differentiated from each other by their parent directory/folder. I've attempted to always make names as meaningful as possible.

All the main pages end in the extension .php - This means that servers will parse these files for PHP and then send the resulting XHTML on to your browser (if you view the source code for this page you'll see how various files have been included in the XHTML by PHP include calls - look for the comments to tell you where these bits are).

Files ending in the extension .htm are generally the bits of code called by the PHP includes. As such they require no head or body sections. They're simply read at the appropriate time in the index.php files.

If, like me, you're new to this field it's a really good idea to have a look at a page like this to learn a few things about best coding practices.

Please take the time to have a look around the site and feel free to get in touch with any thoughts or suggestions.

Once again all the preceding text is from the webpage www.RichsWebArchive.com/home/index.php and it reads as though you are viewing the actual page:

Scalable Page Layout with Fixed Banner and Navigation Bar

Originally written on Thursday 6th January 2011

All the following is the text from the webpage www.RichsWebArchive.com/aboutthissite/splftnb/index.php and it reads as though you are viewing the actual page:

This page was my first stab at getting XHTML and CSS to work together and it has become the basic design for this site. My goal was to have a fixed top banner and left-hand navigation sidebar with a scrolling main content area, all in a scalable page. This sounds simple but it took me about a day to learn how to get it like this.

I'm sure there are lots of other ways of achieving these goals and probably more simply than I have done it. I am a total novice after all. Hopefully though my solution is pretty straightforward and the code fairly tidy. All formatting, both content and layout, is dealt with by the CSS stylesheet.

There are two files used to produce this page: index.php - the XHTML code for this page and rwa1.css - the stylesheet for this page. The stylesheet rwa1.css must reside 1 directory/folder up from index.php if you want to mess about with them or you can edit the reference that loads the CSS file in index.php.

It maybe that you cannot directly open files with the .php extension in your browser - if this is the case then you can download an older version of the files using the .htm extension instead. All files in the older version must reside in the same directory. Please see the My Sytsem page for information about running php on your system.

I'm going to assume that since you are reading this you have at least some basic knowledge of XHTML and CSS and how they realate to eachother. Most especially you will need to understand the use of class and id element identifiers. They are really the key to how the CSS affects the XHTML. If you don't understand this then you won't get the rest of it. There is a good explanation about both at W3.org.

OK, so now down to talking about the code. The key behind this page is using the stylesheet to manage the layout and keeping the XHTML organised into distinct div tags so that the content picks up the correct formatting from the stylesheet.

I'm not going to go into minute detail about how every value and attribute is set, I'd fall asleep doing it. Hopefully I will point out the key facts and you can work out the rest by mucking about with the code yourself. Take bits out, put bits in, move them around, change values and properties and see what happens. It's always easy to use comments to block sections of code and then easy to remove them too.

The head section is quite simple. It sets the character set to utf-8, sets the page title - this shows up in your browser as a tab-lable - and calls the stylesheet rwa1.css.

The body section is where all the action is. It contains 4 distinct div tags. Each one neatly contains all the content for a specific section on the page. The names are meaningful.

The first div is of id titlebar. This places a rectangle at the top of the screen with the page title which is also a link back to the Home page. There are several formatting properties set in the stylesheet for this. These are the three relevant lines:

#titlebar {position:fixed; top:0px; left:1%; 
 margin-top:5px; background:#FF0000; 
 width:98%;}
#titlebar a {color:#FFFFFF;} 
 /* fix title bar links to solid white */
#titlebar h1 {font:30px "Helvetica Bold", 
 sans-serif; text-align:center;} 
    

Briefly, this code fixes the bar at the top of the page, i.e. it will not scroll, sets the background colour, the link colour to solid white, regardless of state, and sets the font properties.

Next up is the navigation div. This places the sidebar at the left of the screen and the links inside it. The CSS is fairly similar to that for the titlebar. The only major difference is that the display property is set to block - this makes the links come out on separate lines with less code in the XHTML.

The contents div comes next. This is the section which contains all this text. The only feature of note here is the CSS property/value pair overflow:auto which tells the browser to add the scrollbar if it's needed. I ended up adding this pair to the navigation div too.

Finally there is one further div called pagelinks. This was just a test originally to see if I could get a scalable and scrollable box on the page. The idea of putting links to various parts of this page came later.

There's one more thing I want to mention about the CSS and it's to do with the scalability or dynamic re-sizing of the page. Play with the window size of the browser window you are using to view this page and you will notice that the sections dynamically re-size themselves as you do it. This is achieved by using percentage values for many of the values in the CSS code.

Once again, all the preceding text is from the webpage www.RichsWebArchive.com/aboutthissite/splftnb/index.php and it reads as though you are viewing the actual page:

Introduction

Welcome to Rich's Web Archive blog. This is a companion to the website www.RichsWebArchive.com. Both are here to document the process of learning to program for the web in 2011.

Most of the posts here will roughly mirror pages on the website. I'm also going to post smaller bits and pieces here as well as the occasional goal I might be aiming for.

Please have a good look round and let me know if you have any comments or suggestions please.