Finding free images you can use on your site

There's no doubting that old adage: "a picture's worth a thousand words", and nothing sadder than a web page full of text with no supporting images. So you owe it to yourself and your readers to add a few eye catching graphics to every page you write.

If you want to download pictures to use you'll want to find royalty free stock images or pictures released under a creative commons license. In this post I'll walk you through the process of finding photographs that use the flickr creative commons license using a search engine I wrote called flickrCC

1. Go to flickrcc.net

2. Enter your search term and click on the 'Find' button

The two check boxes allow you to fine tune your search. Generally the default is all you need, but sometimes you'll need some more control.

By selecting 'For editing' you restrict your search to just those images that allow derivative works: 

• Attribution (CC BY); Attribution-NonCommercial-ShareAlike (CC BY-NC-SA); 
• Attribution-ShareAlike (CC BY-SA) and Attribution-NonCommercial (CC BY-NC).

If you de-select the 'for editing' option you include images from the remaining two Creative commons licenses:

• Attribution-NoDerivs (CC BY-ND) and 
• Attribution-NonCommercial-NoDerivs (CC BY-NC-ND). 

Selecting 'For editing' will give your larger pool of images to draw from, but it will also mean you cannot edit your image, so I'll leave the 'for editing' on for now.

If you check the 'Commercial' box the search will exclude images posted with Attribution-NonCommercial-ShareAlike (CC BY-NC-SA) and Attribution-NonCommercial (CC BY-NC) licenses. If you're planning on selling the final image, or using it in a product that you're going to sell you need to put a check mark in this box. Since I'm putting this image up on the blog here, I don't need to worry about this.

By combining the two check boxes you've got quite a bit of fine control over what gets displayed, but generally you'll be fine if you go with the default. You can read more about the Creative Commons licenses on the Creative Commons license page.

3. Choose one of the images in the left hand panel

Once you've clicked on the 'Find' button you'll get back up to 30 thumbnails matching your search term.

You can get another 30 thumbnails loaded by clicking on the 'next' link at the bottom of the panel.

When you click on a thumbnail the corresponding attribution will load in the right hand panel, along with a larger version of the image...

4. Select the image resolution

When you've found an interesting thumbnail and clicked on it a bigger version is loaded into the right hand panel. Unlike the little, square thumbnails this image will have the picture's correct dimensions.

Clicking on the links below the image will load larger or smaller versions. The medium size is the one you'd usually use for a blog post or web page, but the other sizes can be handy for different applications too. For this tutorial we'll click on the 'medium' link to load it...

4b. Optional extra: edit the photo

Well, if you left the 'For editing' checkbox selected when you started your searech you'll see an 'Edit' link above the copy in the right hand panel. Clicking on this will allow you to edit your picture using the online image editor, aviary.

Aviary will let you crop the image, resize it, rotate it, and add text and other artefacts, making it truly yours.

5. Save the image

When you've loaded the picture size you want (and optionally edited it), right click on it and save it to your PC by selecting 'Save image as...' from the pop up menu (if you're using Firefox, Safari or Internet explorer the menu option might say something else, but should look a bit like: 'save image').

When you save your picture use a descriptive file name rather than the boring string of letters and numbers that comes up by default, it will make it much easier to find later. Also, note which directory you save it in so you can find it again later (my hard drive is full of lost images because I didn't pay attention when I clicked that 'save' button :-)

6. Copy the attribution text

So that we comply with the Creative Commons license we need to add an attribution to our final post. FlickrCC makes this easy by putting the attribution text above the picture. Select this text by left clicking and dragging the mouse over it, then right click on the selection and choose 'copy' from the context menu.

7. Putting it all together

We're all set now to add our free picture by uploading it to our blog or web page along with it's attribution. Something like:

Image: 'Dolomiti - le Odle viste dal Seceda' 
http://www.flickr.com/photos/7772186@N03/3909598872
Found on flickrcc.net

And there you have it, everything you need to know about using flickrcc.net to locate free images, released under a creative commons license on flickr along with a free picture editor for crafting unique new images for your blog, web site or training material - have fun and stay creative,

Peter

PS. if you'd like to spread the word, feel free to re-use any of the material in this post, or the accompanying slideshow 

A programming prescription: JavaScript tonic

Image: 'the JavaScript Code' 
http://www.flickr.com/photos/89943077@N00/2378867408

A little JavaScript revision, followed by an introduction to the jQuery library.

So far we've covered quite a bit of ground in our JavaScript lessons. Here's a few of the highlights...

• The syntax of JavaScript - the set of rules that define a correctly structured JavaScript program
• JavaScript functions - a great time saver for doing repetitive tasks (JavaScript itself has a bunch of functions built in and ready to use)
• The Document Object Model (DOM) -  how the various objects of a document are related to each other.

To get some practice with these three areas, we're going to work through building a Web page which the user can add notes to and edit the content of those notes.

OK, now that we've experienced some of the pleasure and the pain of coding JavaScript from scratch it's time to take a look at the web's most popular JavaScript library: jQuery. Once you've downloaded a copy, try working through this introduction to jQuery.

Now, if you've got a taste for it, choose one or two of these 51 tutorials and examples and work through it/them. If any of them float your boat (or sink it) report back here on what you've found...

Mobile first - Responsive web page design

Image: 'Browser' http://www.flickr.com/photos/38305415@N00/4397800453

Following on from last week's efforts with the jQuery mobile javascript library, I thought we might have a look at building a responsive web page (one that will display its data in different ways on different screen resolutions).

Once again, we're going to stand on the shoulders of giants to achieve our goal. This time using HTML5 Boilerplate. This is a set of HTML5, CSS3 and JavaScript that solves a lot of cross browser compatability issues. Not everyone likes the 'include everything you might need' approach (Harry Roberts, for example), but for our purposes its pretty close to perfect... especially when you find that someone's built a template generator to help you to get started with new responsive design projects based on HTML5 Boilerplate.

Here's a few links to get us started:

• Initializr: With Great Templates Comes Great Responsivity! a good post about how initializr works and why it was created.
• HOW TO: Get Started with HTML5 Boilerplate. Some links to more H5BP goodness

Developing a mobile web site

Image: 'Traditional English Bow-top horse-drawn wagon
'http://www.flickr.com/photos/27712868@N05/2814482383

Going Mobile

This week we're going to look at building a mobile web site (albeit a rather small one).

Before we start, I have to say that there's quite a bit of debate about the best way of going about adding 'mobile content' to a site. As I see it there are 2 schools of thought:

1. Create a separate site just for mobiles and direct any mobile based browsers to these pages. This has the advantage that you've built the best user experience you can for your mobile visitors, but the disadvantage of having to maintain 2 sets of pages
2. Build a web site that's 'responsive' to different devices, scaling larger and smaller as screen size dictates. There are two groups in this camp: one that says you should start with a mobile phone sized version and then design in additional elements for progressively larger screens (such as tablets, netbooks and desktop computers, and possibly tabletop screens in the near future). The other school works down from desktop sized screens (presumably from an existing web site), trimming out 'extra' data or moving it down the scrolling mobile screen. The advantage of this second approach is that you only need to maintain one set of pages. The disadvantage is that these pages can be much more complicated to build and maintain. You can read more about responsive design on scoop.it

For today's exercise I've decided to go with the first school and build a site from scratch.

The development environment

For testing there's nothing like a real mobile phone. You can build pages on your local machine and test on a mobile, but it's a bit fiddly: involving setting up a local web server, connecting to a wireless router and connecting the phone to the development machine's local IP address through that router. An easier method is to install the Ripple Mobile Environment Emulator in chrome.

Once you're set up you can download a mobile web development framework. There are a whole mess of these, but we're going to use the one that seems to be getting the most press at the moment: jQuery Mobile. Not only is it a stable, well supported piece of software, but it has some excellent tutorials and discussions on Quora and stackoverflow.

Here's a couple of tutorials for starters:

• jQuery Mobile – What You Need to Know
• Building Websites And Browser Apps With JQuery Mobile: A Beginner’s Guide
• Implement responsive design with jQuery Mobile and CSS3

Open source HTML editors

Long time, no see

It's been a long time between drinks here on the web development blog, but I've started teaching web development again after a stint as an e-learning evangelist, teaching other trainers how to use web technologies to deliver vocational education, so it seemed a good time to dust off the keyboard and post a little more information.

There may be a few things to catch up on...

First up then was a search for a web editing tool that the class could use for the subject: ICAU4207B - Apply web authoring tool to convert client data for websites (you can read more about it on the ntisthis web site).

If you've got the cash and the inclination the daddy of all web authoring tools is undoubtedly Adobe Dreamweaver. They have a student discount but you're still looking at a $400 price tag for the full suite. 

If you're on a budget, there are some free alternatives, and this week we had a look at Blue Griffon.

The good

• This WYSIWYG editor is available for Mac, PC and linux distros.
• the no-frills version is free
• out of the box it's pretty capable and could result in productivity gains

The not-so-good

• Added functionality will cost you. There are downloadable add-ons ranging in price between $10 and $15. We might need the snippet add-on to address all the performance criteria of the unit
• There's no documentation (this is one of the 'value added' components you pay for)

So, we took BlueGriffon for a spin in the class last night and I think reactions were mixed. A few students thought that they'd be better off learning an industry standard, and will be looking at buying the education version of the Adobe product. Others could see the advantage of BG, but thought that Notepad++ was easier to use and were a bit reluctant to let it go. I've left it with them for the week and will do a poll next Tuesday to see how many of them want to stick with it. If they do we might build a user manual on wikibooks. On the other hand, we've got a bit of time up our sleeves and there are a few alternatives we could explore, including:

• OpenBexi 
• Bluefish and
• Amaya 

These three are all free and open source, have documentation and run on linux and windows, but I'm not sure about their Mac support.