Previously I wrote a script which would allow a user to click a piece of text, and it would fadeout the content and fade in a new piece of content. This script expands on the previous one. It was inspired by a comment a user had left me.

The commenter wanted a script where by he had multiple ’slides’ of content, and when a user clicked on one of the slides, it would fade out the current slide and fade in a new slide. I wrote a brief script to try and help him. However i felt that other people may want a similar script.

So now i have created a more SEO friendly script, which is alot more dynamic and allows for easy manipulating of content. As well as the features above, it will allow the user with  javascript turned off to see all the content.

I’ve created an example file located here, where you can download and view the code. The example given, shows slides from a presentation i gave last year.

About the Code

Now i’m going to tell you a bit about the code, and how you modify it to your needs. If you view the source of the document, and look at the actual html (located towards the bottom of the document). You will notice, Each slide is wrapped in a div element.

Each div is given an incremental id e.g. page_1, page_2 etc, this allows the slideshow to find which ’slide’ is next. As well as the incremental id’s each slide is of class page and box. The box in this example, is purely used for CSS/visual purposes, and can be removed. However each slide must be of class page, this allows the script to detect which divs are slides and what are not.

You can put anything between the opening and closing tags of the page divs, and it shall be displayed on the slide. I’ve just used images, and text, to help highlight some of the possible uses.

Once you reach the end of your slideshow, an alert is shown, this is just to let you know there are no more slides, you may remove this line of code and replace it with what ever you wish.

^{Photo by Marcus Hansson}

After reading multiple articles, on how people had managed to catch crooks who had stolen their laptops, and reading xkcd. I thought i might as well try creating my own solution.

Before I go any further, this solution is a Mac OSX solution, and requires, that you have some webspace, with FTP access.

I will explain what I wanted the software to do, and how it accomplishes these aims.

1. Firstly I wanted the software to recognise if the laptop has been stolen.
2. If the laptop is stolen, take photos of the user, and upload them to my webspace,
3. As well as uploadinging photos of the user, record their ip, and upload a copy to my webspace.

The above 3 points were the basics of the app. However after reading xkcd, i thought it would be cool to get the application to announce to the world (via its speakers) that it is stolen property, at full volume.

Now i have told you what i wanted the app to be able to do I will explain, how it actually does it.

The way the app works, is firstly trys to access the a page on your webserver, for this example, im using this webserver. The page will contain one of three things. Either

unstolen

or:

stolen

or:

stolen-shout

Depending on what is contained in the file, depends on what the script does.

If the laptop is in either the stolen or stolen-shout states, then steps 2 & 3 will be invoked, whereby the laptop will take photos of the users silently, as well their ip address. However if the laptop is retrieves the stolen-shout state, it will then turn its volume up-to level 5 of a possible 10, and shout out that the laptop has been stolen, and keep doing this until the process is killed, or the laptop is shut down.

The hardest part of the script was, getting my Mac’s webcam to take a photo and save it, but luckily enough i cam across the wacaw script which is released under the GNU/GPL license, which is free to use and distribute.  ( you can get it here). So anyway to cut to the chase the script is below:

#!/bin/bash

# Get Date & Time
DATESTRING=`date “+%Y_%m_%d%.%H_%M_%S”`

# Get status message and save it to status.txt
curl –basic http://www.jhlabs.co.uk/wp-content/uploads/2009/01/laptop-status.txt -o status.txt
# Get a list of all wifi points
/System/Library/PrivateFrameworks/Apple80211.framework/Versions/Current/Resources/airport -s > $DATESTRING.wifilist.txt
# Get Users IP Address.
curl –basic http://www.jhlabs.co.uk/wp-content/uploads/2009/01/laptop-ip.php -o $DATESTRING.ip.txt

# Read the message
T0=$(cat status.txt)
T1=“unstolen“
T2=“stolen“
T3=“stolen-shout“

# FTP Details
server=“ftp.server.com“
route=“public_html/laptop-stolen-photos/“
password=“serverpassword“
username=“serverusername“

# Check if the Laptop is Safe
if [ “$T0“ = “$T1“ ]; then
# If the laptop is safe, do nothing.
  echo “All is well“
else
# The laptop has been stolen! Do the following:

# Upload the user’s ip file.
    curl -v -T $DATESTRING.ip.txt ftp://$username:$password@$server/$route

while [ 1 ]; do

# Take a Picture, Say Cheese!

# Take the picture (save it sas buggered underscore date and time . jpeg)
        ./wacaw -n 10 –jpeg  –VGA  gotya/buggered_$DATESTRING

# Shout Out It Has been Stolen?
            if [ “$T0“ = “$T3“ ]; then
say -v alex “This Laptop Has Been Stolen!“ | osascript -e “set volume 5“
fi

# wait 2 seconds, repeat procedure.
        sleep 2

# Upload the photos
        curl -v -T gotya/buggered_$DATESTRING.jpeg  ftp://$username:$password@$server/$route

done

fi

^{Photo by Grimages}

I knew i wanted to write some PHP applications, and wanted to take a strict MVC approach to coding them. The advantage of this is that my code would be cleaner and easier to manage.

So what is a framework some people may be asking.  As a very basic definition I would say it is a collection of classes and functions which will reduce the amount of coding you have to do, which will enable you to perform common tasks.

I’ve had some experience using the following frameworks  before; Adobe’s dreamweaver developer toolbox / Interakt’s MXKollection & Joomla! However i didnt want the overhead each carried with them. MXKollection is outdated, huge and generally pretty horrible to work with if you don’t to click and drag ‘components’. Whilst Joomla! is alot sleeker, lighter and more up to date. However the one disadvantage in my eyes is you have to rely on using a Joomla! site, as the base of your site.

So I started to look for other alternatives, and i came across CodeIgniter, some how it seemed to appeal to me more than CakePHP, Symfony and Zend. I do admit the others were tempting but just didn’t seem to fit the bill correctly for what i was looking for in the framework. CodeIgniter seems to be most flexible, lightweight PHP based framework out there, and seemed rather easy to learn from the user guide (which is fantastic! i might add).

Now i had picked my framework, i wanted to start learning how to use it and get it configured, i started working my way through the user guide, which took a mere hour and an half. Got the example blog up and running, so though i might start building my first application.

My First Application.

The first application i wanted to start making was a basic one, essentially it was a job board, where organisations and individuals would be able to go to a site, and post job vacancies. The jobs vacancies would then be made public.

Two of the features i wanted to integrate, were that i wanted the jobs to be categorised, so users could pick an industry and it would show all jobs from that industry. Also I wanted a basic search form, so users could enter job titles, or a location, so they could find jobs with similar titles, or in a specific location.

I got the application up and running using codeigniter, in under 6 hours, with me writing less than 250 lines of code, (note this does not include views). If i was writing the same application without using a framework i would easily be quadrupling the amount of code, i would be writing.

As a php framework, codeigniter would probably suit most develpers. It has enabled me to write clean, uncluttered code, and has caused me to start writing other applicatons which i can throw up in a short period of time. One of the really nice features i would have to say about codeigniter, is the way in which code igniter, implements validation of forms (using server-side methods) , and its security features. The validation class will save you literally hunderds of lines of code if your form has multiple inputs, which are content sensitive. E.g. data must be required, or it must be of certain type.

So i thoughrly recommend you take a good look at frameworks if your thinking of building any apps, and if your not sure which is right for you why not give CodeIgniter a go.

_{Photo credit goes to Kaz K}

As well as giving you a free ticket to all the carsonified 2009 events, they are also offering to fly you out to one of their events, and put you up in a hotel for the event!

If that wasnt enough already, you will get an all-access backstage pass at all the 2009 Carsonified events, and an invite to the VIP speaker dinner at one Carsonified event of your choice!

I’ve been to FOWA 2007 and FOM 2007. I have also bought my tickets for FOWA 2008 and FOM 2008. All I can say is they’re excellent events. I very much encourage you to attend these events if you want to keep up to date with what’s happening, in their respective fields. These events give you a key insight of trends and developments currently on the web, and currently emerging on the web.

The line-ups have always been great, and are always action packed. Not to mention a live diggnation at the end of last years FOWA 2007, and again this year at FOWA 2008.

As well as a great entertainment and atmosphere, the Carsonified events are truly at the forefront of what’s happening on the web & the other fields their conferences cover. For example FOM 07 was the first place that Google’s Android was demonstrated.

To be eligible to enter the competition, you must do the following:

1. Write a blog post about wanting to win the Golden Ticket, linking to this post
2. Drum up 25 comments on the post (they can’t be you or spam and only one comment per person)
3. Submit the URL by October 1st at Midnight UK time
   
4. Watch the live draw on UStream on Thursday, October 2nd at 5pm London time
5. Party accordingly!

There are some terms & conditions so i suggest you see the original post over at carsonfied website here.

I’ve been fortunate enough to be able to attend these conferences due to Carsonified offering great student priced tickets. I will be graduating in July ‘09. So will then have to pay full price like everyone else. However I would love to attend more Carsonified events!

I would be really appreciative if you guys & gals could leave a comment on the bottom of this post, to allow me to be eligible to enter for this competition I would really appreciate it.

P.S. I so want to do a blog post with the following video in it now. The grandfather is soo cool!

There were a host of excellent sessions last year and seem to be a great line up again this year. If you want to learn about the web industry, and pick up some very very good tips. Get yourself a ticket!

Also the guys from Diggnation will be there again this year! So head over to FOWA site and get your tickets.

Examples of SEF URLs

An example of a SEF URL would something like the example below:

http://www.myshop.com/products/books/frankenstein.html

Whilst an unSEF URL would be something like:

http://www.myshop.com/products.php?type=45&itemid=4234

Why SEF URLs are Important

From looking at the second URL you would not know what we were shopping for, but using the search engine friendly URLs you could see we were looking for a book, and in particular Frankenstein. By having keyword rich URLs you are helping the search engine become lazy, and search engines love it when they can be lazy.

The URLs also let people who browsing through a page of search results find relivant pages quicker. For example if you searched for “Book Frankenstein”  and the two given URLs above were listed which one are you more likely to choose, the one with “books” and “Frankenstein” in it or “products.php?type=45&itemid=4234″?

Most if not all Search Engines now provide a line showing what the URL is that the result point to. In a Google results page, the resulting URL is in green, with the keywords you searched for bolded. In the below example i searched for “Swansea” and “Shopping”. Notice how swansea is highlighted and also shopping in the URL.

Making your URLs Friendly

So now you know what SEF URLs I will now introduce you to creating your own SEF URLs. Before we carry on I am working in a LAMP (Linux, Apache, MySQL and PHP) environment with Mod ReWrite Enabled (this is. So if you are not running Apache or PHP this example will not work for you.

The way I go about creating SEF URLs is as follows. I have a page which loads dynamic content, lets call it page.php

The contents of page.php are as follows:

<?php /**

*   File:       page.php

*   @author     Jon Hurlock

*   @version    1.0

*

*   The page will print out a message, followed by a content items id.

*

*   @return     the dynamic content item’s id

*/
// print out a the following line of text and GET the content’s id

echo ‘You wish to load content with an id of #‘.$_GET[‘content_id‘];
    /*

* if i loaded page.php?content_id=5, it should print out:

* You wish to load content with an id of #5

*/
?>

 

We also need another file for the SEF URLs to work, this file is named “.htaccess”. Please notice the full-stop or period before the htaccess, the contents of this file are:

# Make sure the apache rewrite ,odule is on  

RewriteEngine On
# The following line says to translate a-nice-story.html to /page.php?content_id=123

# So when ever a-nice-story.html is loaded, actually load /page.php?content_id=123 but

# keep the url as a-nice-story.html

RewriteRule ^a-nice-story\.html$ /page.php?content_id=123

 

As you can see page.php prints out the following message ‘You wish to load content with an id of #99′ where 99 is passed to the page through a GET request. So if we loaded page.php?content_id=123 you would see ‘You wish to load content with an id of #123′.

Now by using the .htaccess file we are saying if a user navigates to a-nice-story.html it will load the content as if page.php?content_id=123 was loaded, however the URL which is displayed is a-nice-story.html

The line beginning RewriteRule in the file .htaccess uses regular expressions to match SEF URLs to the ‘true’ URL.

URL Rewriting Conventions

Most URLs that are re-written follow a simple convention. Only the alpha numeric characters are used except for en-dashes (e.g. -), underscores (e.g. _) and full stops / periods (e.g. .). However the fullstop /.period is only used if you want to give your re-written URL an extension such as .html or .php etc. I have createn a simple SEF URL Generator ti see if your generated URLs conform to the standard. It is written in jQuery. just start typing in the input box to see if it conforms. If the box turns green it is ok, if it turns red it doesnt follow the convention.

• click here to access the jQuery based SEF URL checker

I have now updated the function, making it use ques rather than relying on the setTimeOut call. If you have any suggestions or questions about the function, dont hesitate to ask me.

I’ve hacked together a first draft. The only thing i am unhappy with at the moment, is that the function relies on a setTimeOut call. The reason this this line is included, is to remove the clicking functionality, it does this by changing the elements ID.

I have included a copy of function below, and an example of it in use.

The Function Version 2 (current)

<script type=“text/javascript“ charset=“utf-8“>
  $(document).ready(function() {
            $(‘#elementToFade‘).click(function(){
                // time in milliseconds
                // 500 = 1/2 a second, 1000 = 1 second etc…
                var timer = 500;
                // insert Analytics Code Here
                // tracker. . . . . . . . . . . . . . . . . .
              $(“#elementToFade“).animate({ opacity: 0}, timer );
              $(“#elementToFade“).queue(function () {
                    // if you dnt wan the text to chang color remove the
                    // ‘<span class=\”newContent\”>’ part and the ‘</span>’
                    // parts from the next line.
                    $(this).empty().append(“<span class=\”newContent\”>fade me in!</span>“);
                    $(this).dequeue();
                  });
              $(“#elementToFade“).animate({ opacity: 1}, timer );
              $(“#elementToFade“).queue(function () {
                    $(this).removeAttr(“id“);
                    $(this).dequeue();
                  });
            });
  });
</script>

The Function Version 1

<script type=“text/javascript“ charset=“utf-8“>
// when document is ready load this function
$(document).ready(function() {
    // when someone clicks on the element with id of elementToFade
    $(‘#elementToFade‘).click(function() {
        // Fade Out Text, then remove text & insert ’slide 2′, now fade back the text in.
        $(“#elementToFade“).fadeOut(“fast“, function(){$(“#elementToFade“).empty().append(“slide 2“).fadeIn(‘slow‘)});
        // change the span’s Id to noId, making it unclickable, bit of a hack  not really that ideal
        var t = setTimeout(“document.getElementById(’elementToFade’).id = ‘noId’;“, 500);
    });
});
</script>

Example of the Function in Use

An example of the function in use can be found here (v1) & here (v2). In the example there is a telephone number, but the user has to click the text to see the telephone number. I recommend you view the source code to see how it works.

Its all about getting your website listed on search engines and targeting keywords and phrases to help people find your site. Ideally you want to get your website to top of a search results page. Hopefully this post will help you to achieve this.

This guide will take you through four basic steps. Some knowledge of HTML is assumed, however if you do not know any HTML I highly recommend you buy ‘html, xhtml, and css‘ by Elizabeth Castro. The book assumes no prior knowledge of web design or programming. It gives example snippets of code, explains the code line by line, and also shows the output of the code. I give each of my clients a copy of this book. It is a must have.

Step I:   Optimise your site

When “reading” your site, search engines want to put in as little effort as possible. The quicker they can read your site the happier they will be. To allow your websites to be read quickly it is helpful to make your website conform to standards. An organisation called the W3C (World Wide Web Consortium) has introduced standards for HTML, XHTML and various other markup languages. If your site conforms to these standards, it is more likely to be read quicker. To check if you website conforms to these standards you can check your website by insertinig the websites address of your site here.

Also if you can use text, rather than images do so! Search engines can not read text in images! There are tricks whereby you display an image to users, and display text to search engines. This is a more advance topic, and wont be covered here.

Tables are for data only! If you designing sites using tables stop! Tables are meant for tabular data only. If you do not understand what i mean it is worth reading this article.

Get to the content! A search engine does not want to have to traverse 40% of the markup before it gets to the content. If you can minimise the amount of markup on the site do it.

Meta tags, and title tags; you should be filling these in religiously. There are many meta tags you can use, but you should definitely be filling in the description meta tag, this is what people will see in the search engine results page. Personally i find the description tag, and the title tag weight very heavily when targeting keywords and phrases. Personally I find the keywords meta tag is redundant. If you can provide unique description tags and title tags for each page, this can really help when users are searching for your site. I would recommend something along the lines of “Your Company Name : Page Name”, where Your ‘Company Name’ is your companies name and ‘Page Name’ describes the page, e.g. Home / Contact Us etc.. If your business is geographically conscious (e.g. you want to target somewhere close to home) then i highly recommend putting the business location in your title tag ( e.g. “Your Company Name, City : Page Name”).

Step II:  Optimise your content

Optimising content is different from site optimisation. Site optimisation is more about the template of your site. Optimising your content is more about copyright, and the structure of your content.

You should think about your content as a document. It has a single heading, paragraphs of text, sub headings, and sub sub headings. H tags (eg. H1, H2, H3 etc..) should be used appropriately H1 being the documents heading, H2 a sub headings and H3 a sub sub headings. Please put paragraphs in P tags. There are standards and you should be conforming to them.

When writing your content you want to be dropping in keywords, or words which may be associated with the topic that you are writing about.

You may be targeting a certain phrase, be aware potential readers may call it something else. For example “stand up paddle surfing” is the same as “stand up paddle boarding”. If i forget to mention stand up paddle boading, when writing about stand up paddle surfing. Search engines wont pick up on it. Expand your use of language, different people search for different things, but can be looking for exactly the same thing.

Write your keywords as you say them. I have several clients who’s business names are two words without a space between them. However looking at what people search for, they are searching for a mix of two words joined together (e.g. “jhlabs”), and the two words with the space(e.g. “jh labs”). So mix it up a bit.

Step III: Submiting your Site

Heres a secret most companies wont tell you. You yourself can submit your site to seach engines! There are two ways of doing this. FIrst if your website gets linked to by another site that is already listed, it will most probably be automatically submitted.

However the more reliant way is to directly add your site to search enginges. To do this you can use their search enginge submission tools for Free. Normally all you have to do is fill in a form with your website address, and brief description of your site (no more than 50 words).

• Submit your site to Google
• Submit your site to Yahoo! (requires you to register with a Yahoo account)
• Submit your site to Microsoft Live / MSN Search

 If you want to submit to any other search engines just search for the search engines name and submission. E.g. “Google Submission”. I do not recommend tools which state they submit your site to X number of search engines. Also these companies can not guarantee that you will be listed, there is a very very high probability that you will be listed. But search engines can refuse to list you.

Step IV: Promoting your Site & Keeping it fresh

Once your site has been submitted, the worst thing you can do is let it stagnate. No one wants to re-visit a site with no fresh content on it. Also no one likes  a site with incorrect details on it.

Content is king! The more quality content you have the better. Ideally you want to become an authority site on your desired product/market/niche. To become an authority site you need to be known, and talked about. If you can get other sites to link to your site it can help its “authority ranking”. However I recommend that if you do purse this route, make sure they are either geographically linked, or have a common interest. There is no point you being a online clothes shop in Swansea, and linking sharing with a fishmongers in London.

Have a blog! By keeping a blog you are informing the world of what is happening with your site and your business. The advantage of blogs is everything is time stamped. So a search engine will be able to recognise if content is fresh. I highly recommend downloading and using wordpress as a blog system, or expression engine. Blogs are great for targeting keywords and phrases, and can really help SEO wise. Just please remember never to stop blogging.

This tutorial barely scratches the surface of SEO techniques, and is intended to be a beginners/introduction guide. In the  coming months i shall be writing about more in-depth and advance SEO techniques. I hope this tutorial has helped you. If you have any questions and/or comments please feel free to ask/comment. I will try to respond as soon as possible.

CSS

The first link i sent over was about the user of media queries in CSS3. Basically media queries allow you to display different implementations of CSS depending on what device the page is being viewed on. E.g. you can say if your screen is 800px wide, display this otherwise display this. Its got some more advance stuff, but that was just a simple example. Anyway heres the link:

• http://www.css3.info/preview/media-queries/

The second of my links I sent was about CSS Frameworks. These allow you to save time when creating CSS based templates. They also normally incorporate a grid based systems which can aesthetically make your site more pleasing to the eye. I have recommended two frameworks.

• http://960.gs/
• http://code.google.com/p/blueprintcss/

There are many many more frameworks, but these are the ones i suggested. A list of other frameworks can be found here.

After writing the e-mail I came across an article on sitepoint titled ‘Tomorrow’s CSS Today: 8 Techniques They Don’t Want You To Know‘. It contains some very cool techniques such as using regular expressions to check what a link links to e.g. a PDF document, word document. Depending on what the link links to, a little background graphic will display next to the link with a meaningful icon (e.g. a PDF icon for a link linking to a PDF document).

JavaScript

Although the link that I sent is not strictly for developers, it can server as a gentle introduction to JQuery.

“JQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.”

- jquery.com

The link I sent was about introducing JQuery effects to web designers. It requires a basic knowledge of javascript & the DOM. It shows you how to apply JQuery to a page, and how to insert some rather cool effects. The tutorial walks you through the code, which is downloadable, and has live examples. So you can see the code in action! Anyway heres the link:

• http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

Flash

Ever wanted text have that cool font. But dont want to use an Image, because no-one else has that font? Well heres an accessible, SEO friendly approach sIFR. sIFR uses CSS, javascript & flash, to do text replacement or should i say font replacement. The link i sent is definately worth a read (in my honest opinion):

• http://www.mikeindustries.com/blog/sifr/

Ruby on Rails

I myself am exploring the world of ruby on rails. As a PHP developer it is a total different way of thinking. To be honest i’m not totally convinced yet. However i chucked in some links for the guys to introduce them into the world of ruby on rails.

With the advent of Rails 2.0 some of the tutorials will be out of date, however they still serve as good tutorails if you want to experiment with Rails

• http://www.peepcode.com
• http://www.railscasts.com
• http://media.rubyonrails.org/video/rails_take2_with_sound.mov

If you are a PHP Developer I highly highly recommend getting a copy of Rails for PHP Developers. It servers as an excellent guide to Ruby on Rails. Whilst Agile Web Development with Rails (the 3^rd edition covers Rails 2.0)is for those who have little / no programming experience, and thus can be very waffly at times.

Web Server (Linux, Apache / Nginx, MySQL, PHP / Ruby on Rails)

If you ever want to create your own webserver, or if you have unmanaged hosting (VPS or Dedicated). I cant recommend the next link enough.

• http://articles.slicehost.com/

Slicehost provide low cost VPS hosting as all their ’slices’ are unmanaged, however they have brought out great articles for setting up different VPS setups . Their articles cover VPS setups for the following Linux distributions Ubuntu, Debian and CentOS. The articles provide advice and guides to using Apache and Nginx, as well as helping you setup several different frameworks (RoR, Django), and much more. I highly highly recommend them!

Anyway that brings me to the end of this post, I hope you have found the links useful. I will probably post some more in the near future. Keep me updated if you find anything interesting or useful.

A Little about me

I am a freelance web developer & designer, living and working in Swansea. I am also a (final year) student at Swansea University, studying computer science. I specialize in CSS & XHTML development, but also have excellent skills using PHP, MySQL, javascript and other technologies.

I’ve worked on numerous bespoke content management systems, and have experience using several ‘pre-packaged’ content management such as Joomla!, Mambo, Wordpress, Drupal & EMC² Documentum.

As well as content management systems, i have experience with e-commerce, specifically with ZenCart. I have successfully launched several online stores for my clients. You can find out more about my clients and sites I have launched in my portfolio.

About the Site & It’s template

I will be updating the site over the coming weeks, to get content up. If you find something on the site that isnt working please twitter me. The current template is almost complete, so some of the views may not look so great, e.g. categories view & individual posts. Also its currently designed with the CSS3 specification in mind so certain browsers (IE / FF < 3) will not support all of the elements. So basically its best viewed with Safari.

The template from this site, borrows elements from several other blogs & sites which i like. These can be found via my blog roll on the right hand side of the front page. I would also say thanks to Bash, Andy & Tom for help with finding good wordpress widgets. The main template uses Elliot Jay Stocks Starkers Theme, which serves as a base template, and on top of that is hand coded XHTML & CSS by myself.