What’s in the bundle?

1. jQuery Drag & Drop

   Using jQuery PHP and MySQL a complete drag and drop script that updates the database. demo

2. jQuery Delete

   Delete items using PHP jQuery using an AJAX request demo

3. PHP jQuery and MySQL Autosuggest

   A powerful autosuggest script that searches a MySQL database to return you result demo

4. jQuery & PHP username checker

   Checks the database to see if a chosen username exists in the database and returns true or false demo

5. CSS3 Buttons

   Styling elegant buttons using CSS3 demo

6. Feedburner Stats

   Using PHP and CURL to get your feedburner subscriber count demo

7. jQuery & PHP username checker

   Checks the database to see if a chosen username exists in the database and returns true or false demo

8. jQuery image Zoom

   create a simple gallery with a hover image effect demo

9. jQuery PHP & MySQL inline editing

   Edit page content directly in the browser inline using jQuery AJAX requests demo

10. jQuery Gallery

    Animated jQuery gallery with title and description demo

11. Highlighting form inputs

    Highlight any input field using JavaScript demo

12. jQuery JSON & PHP

    Create a simple product gallery using JSONP PHP and MySQL demo

13. jQuery Tabs

    Simple tabs rendered using jQuery demo

14. jQuery XML

    build a product gallery parsing XML using jQuery demo

15. jTruncate

    Using the jTruncate plugin to truncate text with a ‘more’ link demo

16. PHP Page scrape

    Scrape page contents using PHP and CURL demo

17. AJAX Check

    Check to see if a normal GET or POST request was made or if an AJAX request was made demo

18. PHP Pagination

    A useful and raw PHP pagination script that could be adapted in to a class demo

19. jQuery Sliding Menu

    jQuery drop down slide in / out menu inspired by 9rules.com demo

20. jQuery Tooltips

    An experimentation into building jQuery tooltips with AJAX requests, images etc demo

The Design

Once the basic concept was established I started with a brand and logo, I had already decided on the name ‘We Deliver’ so I chose a typeface and style and developed the brand for the site. The logo and type very much influenced the tone of voice for the project. Minimalist, modern, with a simple user experience.

Visit the site

You can check out the site here. Im always inspired by the fun mini projects that Carsonified do as well as other viral campaigns like the work of Poke London. As a designer and developer I think it’s important to challenge yourself sometimes and it’s the best way to learn new techniques. I’ve never built an e-commerce site before not that this project is, however it gave me an insight into using jQuery to calculate the number of products as well as dynamically working out the exchange rate to show the total price in GBP.

The Code

Here’s how to setup a simple chart. you need to include the jQuery framework as well as the highcharts.js file and excanvas.js file for IE users which you’ll get in the download from Highcharts. once you’ve got that setup simply paste this into your document head, and create a div with the id ‘graphDiv’, this is where the graph will render to. Note in the first few lines of setup code at the top of the script we specify this along with the chart type. In this case we’re using a bar chart. Below that we have the setup title parameter which is the main label for the graph along with the labels for the x and y axis.

You should be left with a graph as shown below.

   $(document).ready(function() {
      var chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'graphDiv',
            defaultSeriesType: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Anne',
            data: [1, 0, 4]
         }, {
            name: 'Martin',
            data: [5, 7, 3]
         }]
      });
   });

NOTE: the demo below is not of the code above. If you want to play around with the code for the demo you can simply copy the source from your web browser whilst viewing the demo

The Competition

Papermashup has teamed up with EasyPHPWebsites.com to give away three free copies of the e-book (including access to the videos). Find out more about the book here
Competition closes on the 14th of December 2009 with the three winners being announced shortly after the closing date. There is no cash alternative and no purchase necessary.

How To Enter

This competition is now closed!

1. To enter simply post the below on twitter and we’ll pick three people from random. Couldn’t be easier!
@ashleyford & @wjgilmore are giving away free copies of Easy PHP Websites with the Zend Framework. RT to enter http://twi.la/ew8zt

Header tags

It’s important to workout your page structure and a hierarchy of elements. Once your page structure is determined you can go ahead and use the header tags where necessary to allow the search engines know which content is important. Usually text should be put in ‘p’ tags with titles or headers being expressed in h1 h2 h3 h4 h5 h6 tags. There are six levels of headings in HTML with h1 being the most important and h6 the least.

Meta Tags

A much disputed topic. In particular the ‘keyword’ tag where you can put tags or ‘keywords’ describing your page or site content. Google recently spoke out about how they no longer take into account a pages keywords as it’s an inaccurate way to determine quality content. I won’t hurt to leave any keywords in your page, but just be aware that search engines no longer rate it.

The meta description tag is intented to be a brief and concise summary of your page’s content. If you provide a meta description within your page it will be used as description that apears in search results. You can see an example below for a Google search of ‘papermashup’.

Have a sitemap

In the Meta tags image above you can see the sub-links below my result in Google. These sub-links are created because I have the sitemap plugin for wordpress which automatically creates an XML file with links to all my posts which are given priority by a percentage. You can see my sitemap.xml file here. Then using the Google Webmaster Tools you can submit your sitemap.xml file which will then be indexed giving Google a better view of the structure of your sites pages.

Title and Alt tags

It goes without saying a picture paints a thousand words. Unless your a search engine. I’m sure one day google will have an algorithm that will rate your page not just on your HTML text but also images that accompany your page. For the meantime however we still need to add ALT and TITLE tags to images, not just for SEO purposes but also for accessibility and screen readers.

Link Building

Link building is all about who links to your site and who you’re linking to. For example if a lot of websites in the web design industry link back to my site over time my posts will start popping up more regularly in google searches. I know this works because after submitting my posts to a few well known sites my traffic from search engines jumped through the roof. On average 48% of my traffic a month comes from search engines. If i had any advice for link building within web development it would be submit your blog posts to community news sites like Dzone.com scriptandstyle.com and noupe.com

A key tool for any budding web developer is API knowledge. It’s good to familiarise yourself with a variety of application interfaces. I started out using the Twitter REST API with PHP and CURL when twitter first launched the API to basically get a users tweets, pretty simple now I look back, but at the time it was the first time i’d done such a thing. As the development of social media continues this will increasingly open up opportunities to develop more and more applications that interact with one another and and make our daily chores more eventful.

Frameworks

There’s generally a framework for just about every programming language out there. Whether you decide to learn the jQuery framework for JavaScript or Cake for PHP each one will help you succeed as a freelancer and further your career as a web developer. Frameworks in many respects take out the arduous repetitive tasks we face daily and give us more time to focus on developing cutting edge products or applications.

iPhone Applications

Companies are Increasingly seeing the massive potential that there is in the mobile platform. Applications that are approved and make it into the Apple app store have the opportunity to be downloaded thousands of times and can potentially make a lot of money. Having a specific skill to be able to develop for this market can be very lucrative, especially in the current economic climate when companies are turning to social media to plug holes where they’re not seeing return on investment from other advertising sectors.

CMS Customisation

A handy skill to have is a general knowledge of how to use content management systems. For example building themes and plugins for WordPress, or modules and components for Joomla and Mambo. As a developer its important to have an idea of the structure of a variety of CMS’s. If you have a wordpress blog/site, that’s an easy way to familiarise yourself with the platform. Remember it’s always easier to learn something by immersing yourself in the technology.

Online Payments

Businesses are always going to need payment solutions online. Having the skills to take a site and integrate paypal or google checkout will allow you to go far. We’re starting to see many 3rd party software companies setting up and selling software at more affordable prices, take Panic for example. They are a relatively small company that develop a selection of web development software for the mac. Many new startups are settling for a product based revenue stream rather than making money purely through ads, revenue share, or partnership deals. This opens up the demand for skilled developers to be able to build payment solutions.

Take Time To Learn

In order to get into your new programming language you need time and commitment to perfect your new skill. Take the time to spend a day learning rather than and hour here and an hour there, you’ll learn more this way. it took me about a week to get comfortable with jQuery. I use jQuery everyday so it was relatively easy to get to grips with as the learning process was continuous, however you need sleep so your brain can de-fragment everything you’ve learnt that day.

Buy a selection of books

The truth is you just can’t learn a programming language in 24hrs, some books purport to teach you the basics in 24hrs. I’ve never found these books useful. I’d recommend buying a selection of books for whichever language your learning and sit down and read the basics. You’ll find some books easier to read than others so pick your books carefully. Remember you won’t be able to learn everything from a book but it’s a great starting point to start to understand the logic.

Collect tutorials and demos

Start building up a folder of download demos that you can refer to and reverse engineer. I find this very useful, and still do it if i want a quick fix for a project. Reading tutorials on your specific language will also give you a better understanding. generally tutorials are short and sweet and give you all the info you need to know.

Bug fixing

It’s inevitable that your going to run into code errors. Don’t pull your hair out, we all go through it, work through the error and go back on yourself to find out what the problem was. If your building an application, don’t just code it all then test it. Test your code as you go along, then if you find an error you’ll quickly be able to identify the problem.

There are a variety of web thumbnail services out there but the best and easiest to use by far is shrinktheweb.com

Using the Shrinktheweb.com Pro Features

• Specific Page Captures – “inside pages”
• Full Length Captures
• Custom Sized Captures
• Refresh On-Demand – queued instantly
• Custom System Messages – private label with your own system message thumbnails

Native Capture Resolution

• Capture using browser resolution of 800×600 or 1024×768
• Widescreen Thumbnail Capture
• Capture using any browser resolution (i.e. 1440×900, 1024×750, etc)

Check out the FAQ section for more documentation.

Lets add thumbnails to an application

I’m going to run through the concept of adding web thumbnails to an analytics application. Lets say we have a concept and want to display our data like the image below taken from the popular link shortening service http://tweet.me.it.

So we have our data in a database including the URL or link to our target site that we want the thumbnail for. In the code example below you’ll see that I’m just doing a simple database query in a while loop. You can see from my example that it’s very easy to add web thumbnails from shrinktheweb.com to your application and sites, and it improves the readability, stickiness, and retention rate of your users.

This is the kind of query used to create the example in the image above.

<?php

// simple database query
$result = $connector->query("SELECT url, title, clicks  FROM analytics order by date ASC LIMIT 10");
while($row = $connector->fetchArray($result)){			

// store the variable from the database
$clicks = stripslashes($row['clicks']);
$title = stripslashes($row['title']);
$url = stripslashes($row['title']);

?>

<div class="analytics">
<img style="float:left;" src="http://www.shrinktheweb.com/xino.php?embed=1&STWAccessKeyId=YOURKEY&stwsize=tny&stwUrl=<?php echo $url;?>"/>
<?php echo $title;?>
<?php echo $url;?>
<?php echo $clicks;?>
<div style="clear:both;"></div>
</div>

<?php
// end of while loop
}
?>

Rant over, i’ll tell you what i did.

Firstly i modified my .htaccess file with the help of David Airey and his great post on image hotlinking and the solution.

Add this to your .htaccess file and you should be in business

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+\.)?papermashup\.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !google\. [NC]
RewriteCond %{HTTP_REFERER} !search\?q=cache [NC]
RewriteCond %{HTTP_REFERER} !msn\. [NC]
RewriteCond %{HTTP_REFERER} !yahoo\. [NC]
RewriteRule .*\.(jpe?g|gif|bmp|png|jpg)$ images/hotlink.jpe [L]

the code above uses the mod_rewrite module built into PHP to filter out the domain name referrer so anyone who links to an image on your domain will see (in the code aboves case) hotlink.jpe. the reason we use jpe is because jpeg and jpg are filtered out. This code however still allows Google, Microsoft, MSN, and Yahoo search engines index your site images.

The result:

Its entirely up to you but i stuck with David Aireys approach and saw it as free advertising from the people who steal content, this is the result on guidesigner.com after i implemented the changes.

Hope this helps other frustrated bloggers that have their content completely ripped from their site.

Here’s a quick piece of code to simply display your feedburner stats on your blog. I’m yet to post my stats publicly on my blog but have seen numerous blogs with the standard feedburner badge which I think is quite ugly. So here’s how to just get the stats using PHP and CURL. You can then style it how you like.

$ch = curl_init();
//set the feed url and options plus a timeout value
$timeout=5;
curl_setopt($ch,CURLOPT_URL,'https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=AshleyFord-Papermashupcom');
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
$result = curl_exec($ch);
// get just the subscriber number using the regex function
$subscribers = get_match('/circulation="(.*)"/isU',$result);

echo 'Papermashup.com has <strong>'.$subscribers.'</strong> subscribers';

//close connection
curl_close($ch);

function get_match($regex,$result)
{
	preg_match($regex,$result,$matches);
	return $matches[1];
}