Standing on the shoulders of giants

Image: 'untitled' 
http://www.flickr.com/photos/34000660@N08/3347574988
Found on flickrcc.net

This lesson is about rapid prototype development using some of the tools we've explored so far (and a couple of new ones).

Let's say you've been given a brief: 'build a website about x' (x could be anything, today lets say it's the samsung galaxy phone). Where do you start?

The way I see it you need 3 things for a website to work:

1. A usable site structure
2. An appealing design
3. Good content

Let's tackle them one at a time.

Site Structure

I've put this first because it seems to be a stumbling block for many people. What pages will your site need and how will you lay them out? Often a customer will have an idea about what pages they need. If not you might build a site around the activities it supports (e.g. looking for products, reading feedback about them, putting them in a virtual basket, looking at your basket, purchasing, tracking delivery), or it could be layed out along company lines (departments, regions etc).

But what if, like us, you're starting with a blank slate? A great way to lay out a site is to find out what people are interested in and go from there. If you had the money you could hire a marketing firm and do some work with focus groups. But if you're cash strapped Google has a great tool in it's adwords product: the keyword suggestion tool (to use it you may need to sign up for an account). Put in your starting term (in this case: samsung galaxy), tinker around with the settings  and you're away:

Looking at the results you'll see what people have been searching for (and how many searched for those terms). If you're interested in making money from running google ads you'll also see which terms are compeditive (i.e. have advertisers competing to put ads on your pages). When sorted the results for our samsung galaxy query look like this:

From here you could refine your search by clicking on any of the search results, or just look through the list for ideas. Looking at this list I'd say we need top level pages for the Galaxy A, S, S2, S3, Ace and Tab. By clicking on the dropdown next to the results and selecting 'Google Search' you can see what other people are writing about the subject, and also (at the bottom of the results page) see some more suggestions. Here's what comes back from 'samsung galaxy a':

These would make good second level pages (i.e. pages linked to from the top level 'samsung galaxy a' page.

Design

We've already had a bit of a look at fast tracking design using Lavish. We can take this a step further by using one of the bootstrap example templates. To use one of these, open the example then save the page to your local drive.

Content

If you're starting from scratch the quickest way to put in content is to find stuff other people have created and made available. That means content that has no copyright (public domain), or limited copyright (Creative Commons).

All the wikipedia content is released under a Creative Commons Attribution-ShareAlike License so there's a ton of text to begin with (don't forget to add the attribution though).

For media (music, pictures, video, clipart etc.) there's a range of sources. A good place to start looking is on the Creative Commons search page. I used flickrCC.net to find the image at the top of this post.

 Using pre-made content is a good start, but you'll get no credit from Google for recycling stuff they already know about. To get some ranking you need to add your own information, and/or get your visitors to add to it.

CSS Layout

Image: 'left arrow' 
http://www.flickr.com/photos/92709190@N00/787920010
Found on flickrcc.net

Getting sick of everything aligning to the left or the centre of the page?

This week I want to have a look at using CSS to layout you pages in a more appealing manner. I was going to write a post about it, but then came across the excellent Learn CSS layout site. Highly recommended.

After you've worked through some of the examples do yourself a favour by looking at Bootstrap Scaffolding - it takes a lot of the pain out of using CSS to lay out a page.

If you want some more detail than the admittedly sparse documentation on the bootstrap site, there's a nice selection of video tutorials on Bootstrap 101

Long content and linking pages

So far we've been working with single short pages of information. But what happens if you've got some big slabs of text to present? How would you present long texts so that people don't get overwhelmed? In this post we'll have a look at a few different solutions...

Setting up a template

Before we start let's create a space and some pages to work with.

We'll be using Twitter Bootstrap to style our pages. So if you haven't already got a copy, head over to the Bootstrap site and download a copy, then go to the template section of the 'Getting Started' tab and copy their page template.

We'll need some text on the page too. So that it's not too distracting, we'll use something nonsensical. Lorem Ipsum is the text of choice for web developers. Go to a lorem ipsum generator, grab 5 paragraphs and paste it into your template just below the 'Hello World' header.

Edit the text you just pasted so that it has <p> </p> tags around each paragraph.

Now you've created a template, save it into your bootstrap directory as page1.html
Now make 4 copies (page2.html, page3.html, page4.html and page5.html); we're set to go...

Linking separate pages

The traditional approach to presenting large amounts of information is to create separate pages of and link them together. You may need to put in several links so that viewers can navigate directly from one page to any other.

Add this code just after the body tag on page1.html:


    <a href="page2.html">Page 2</a>
    <a href="page3.html">Page 3</a>

To get your other pages linking back to the home page and to each other you just need to copy this code and edit it so that it points to the other pages. For example, on page2.html it should look like:


    <a href="page1.html">Page 1</a>
    <a href="page3.html">Page 3</a>

Update and test for page 1, 2 and 3.

Beautifying your links

The bootstrap css allows you to style your links so that they look like buttons. Just add the btn class to your anchor tags:


    <a href="page2.html" class="btn">Page 2</a>
    <a href="page3.html" class="btn">Page 3</a>

Adding some icons

You can add some icons to the buttons using the 'icon-xxx' class. See the Boostrap icon documentation for the various icon names available*.


                <a href="page2.html" class="btn"><i class="icon-book"></i> Page 2</a>
<a href="page3.html" class="btn"><i class="icon-book"></i> Page 3</a>

* If you want more icons, you can change the icon set available. This post tells you how to use the famfamfam icon set instead

Creating one long page 

Instead of creating separate pages, you could make one long scrolling page and linking to headings inside the document.

Open page4.html in your editor, copy and paste your H1 and lorem ipsum text a three of times so that you have a nice long bit of text (you should have 4 headings now, with text after each one of them). Change the heading text in each section so you can tell them apart (I just added a number after each one).

To link within the page we're going to create sets of anchor tags. One acting as a target, and the other linking to it. Just above the first H1 tag add the following code:

     <a name="1"></a>

This is our target.

Go to the bottom of the page and enter this code:

   <a href="#top">Top of page</a>

This link looks for the target with the name '1'. Clicking on it will take you to that anchor tag.

To complete the navigation for the page, we need to add named anchors above each of the H1 tags on the page: <a name="2"></a>, <a name="3"></a> and <a name="4"></a>

Below them we need to create links to the other sections, but instead of the anchor tags we used with our 3 page experiment, we'll use another Bootstrap component: the navbar.

To create a navbar for our page, add this code to the top of the page:



  <div class="navbar">
    <div class="navbar-inner">
      <ul class="nav">
        <li><a href="#1">Hello 1</a></li>
        <li><a href="#2">Hello 2</a></li>
        <li><a href="#3">Hello 3</a></li>
        <li><a href="#4">Hello 4</a></li>
      </ul>
    </div>
  </div>

Here we're using an unordered list of links to the named anchors on the page. We could copy this nav bar onto the page 4 times, so people could navigate from the end of each section, but a better idea would be to fix the navbar to the top of the page so that it remains visible as you scroll up and down through the content. You can do this by adding the class: navbar-fixed-top to the navbar link:

<div class="navbar navbar-fixed-top">

Making a tabbed interface

A solution to the confusion our 'scrolling page of death' might create, is to hide sections of the page until they're needed. You can do this by making a tabbed interface.

The easiest way to start is by copying the code from the Bootstrap site:


<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

You can see that each of the tabs are defined in an unordered list and that they link to an ID on the page (#tab1, #tab2). Each of these are IDs for the divs that contain the content (e.g. <div class="tab-pane active" id="tab1">)

Replace the code: <p>I'm in Section 1.</p> with our H1 and Lorem ipsum text (and the other <p>Howdy, I'm in Section 2.</p> with the second section) and we've got the start of a tabbed interface. Add two more tabs for the remaining sections and we've converted our page altogether:

Something to explore

A different approach than using a tabbed interface is the collapsible or accordion page but I'm tired of typing now so I'll leave this one for you to explore and learn about ;-)

Credits

Image: 'The Long Book' 
http://www.flickr.com/photos/23224700@N00/2970610049
Found on flickrcc.net

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.

like falling off a log

An assignment for the subject: Monitor traffic and compile website traffic reports.

Write a few pages outlining which reports you would recommend from a web log analysis program for the following 3 groups: web owner, system admin & web developer.

Include some screenshots of each report and some information on how often they should be accessed; what information they are showing and why it is important to the viewer; and what problems might be indicated by the report (along with some ideas about how to solve them if they do come up)

Also include some analysis of a web site - particularly what times are the busiest and the slowest and when it might be best to schedule updates to the site.

Image: 'Log Texture'
http://www.flickr.com/photos/82518118@N00/2313754224

more validation

I was thinking of u all fondly today and thought you deserve a little present:

fValidator is an open source (free) unobtrusive javascript tool for easy handling form validation. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It also displays error messages right where you want them - just the ticket for your form validation needs.

Image: 'My plane ticket'
http://www.flickr.com/photos/44124300615@N01/2432095214

absent note

first up, please accept my apologies for being absent today. I did a pretty stupid thing on Saturday and need to lie around feeling remorseful for a bit (the pic here isn't my bike, but it's a pretty close approximation - I lost a little skin, sprained a few joints, cracked a rib, may have broken my thumb... and got off pretty lightly, all things considered).

On the Javascript front, I believe we just finished looking at form validation. To practice a bit I'd like you to create a contact form which prompts for a name, phone number, email address and comment - checking validity for each before submitting. For bonus points add an age field and check for a valid age (say between 5 and 105). Errors or omissions should be flagged by revealing an error message beside the relevant field using CSS and DOM magic.

Finished? Read through and try out some more advanced DOMination

CU soon, Peter

Image: 'Picture073_11Sep04'
http://www.flickr.com/photos/89689539@N00/373976620

loopy

This week saw us trying out some JavaScript looping

Read through a little intro and try out the exercises I've uploaded here:

http://bathurst-tafe.nsw.edu.au/~pshanks/javascript/loops-exercises/

Image: 'loopy'
http://www.flickr.com/photos/86176561@N00/273326027

making choices

Inclement whether prevents my attendance in person, but I'm with you in (e)spirit.

Today we're looking at conditional statements in JavaScript (if/then/else). These are described in the handout, page 14. Unfortunately that's not quite the whole story - you really need to know a bit about multiple if statements (and their clever cousin, the switch statement). See the web cheat sheet for a fine explanation/demonstration.

If you're keen to become a real JavaScript geek you might also want to know about the 'conditional operator' described about half way down this page by the Washington center for environmental visualisation(?).

Fully read up?

Try these interesting exercises (in groups, or as a hard old loner)...

1. Open http://bathurst-tafe.nsw.edu.au/~pshanksjavascript/conditionals-exercises/conditionals1.html in your favourite editor.
   In this exercise, you'll write a function called guessAge() that, oddly enough, lets the user guess your age. The user's guess is in document.ageForm.ageGuess.value. The guessAge() function should pop up an alert box telling the user whether or not s/he guessed correctly.
   
   

2. Open http://bathurst-tafe.nsw.edu.au/~pshanksjavascript/conditionals-exercises/conditionals2.html in your favourite editor. You can copy your completed conditionals1.html to conditionals2.html if you'd like to edit your existing work rather than starting from scratch.
   In this exercise, you'll modify your age guesser from exercise #1 to provide some additional feedback to the user. The guessAge() function's alert box should let the user know if s/he guessed correctly, if you're younger than the guess, or if you're older than the guess.
   
   

3. Open http://bathurst-tafe.nsw.edu.au/~pshanksjavascript/conditionals-exercises/conditionals3.html in your favourite editor.
   Everyone knows that flowers need water to grow. This HTML page has a watering can and a flower. This particular flower needs to be watered three times before it can grow. When the user clicks on the watering can, it should change to the image shower.jpg. After one second, the watering can should stop watering the flower. (We provide this code for you; read the comments in the program carefully.) The third time the user waters the flower, the flower should bloom. (There's an image of a bloomed flower in flower.jpg.)

Image: '"It is our choices. . . that+show+what+we+are,++far+more+than+our+abilities."'
www.flickr.com/photos/12596956@N06/2699207704

JavaSkipped

suddenly realised that I've been very remiss about posting relevant JavaScript links here. Time to make amends.

First up, we've been working from a document I found on the interweb: a JavaScript tutorial. Thanks to the wonders of modern science this plain web page is now available as an open office document (37k) or a microsoft word doc (180k).

So far we've worked through the following sections:
1. Introduction

2. Embedding JavaScript into your HTML document

3. Variables

3.1. What are Variables?

3.2. Values of Variables

3.3. Data Type Conversion

4. Literals

4.1. Integers

4.2. Floating-point literals

4.3. Boolean literals

4.4. String literals

4.5. Escaping characters

5. Arrays

6. Operators

6.1. Selected assignment operators

6.2. Comparison operators

6.3. Selected Arithmetic Operators

6.4. Logical Operators

7. Using JavaScript Objects

8. Functions

8.1. Defining a Function

8.2. Calling a Function

We also applied ourselves to the following exercises:

Variables: open document (33k), word (101k); and functions (grab the contents of http://bathurst-tafe.nsw.edu.au/~pshanks/javascript/function-exercises/ and fix the html pages: functions1.html through functions6.html).

Image: 'Zion and Tracy jumping'
www.flickr.com/photos/81859405@N00/260323975

SQL has a new home

to celebrate our combined CertIV SQL class I've created a new blog just for our database subject. You can see it and read all about our subject on:

http://certivsql.blogspot.com/

SQL like a stuck pig

Yahoo. Back for a new season of coding!

This semester we're going to spend a fiar slab of time learning structured query language (SQL to its friends).

To get into this we need to install a local web server, database server and database manager. Luckily someone has already put a package together for us to download and install. Xampp (38 MB from Apache friends) has everything an aspiring SQL guru could want.

After downloading and installing start the xampp control panel (it will be something like: C:\xampp\xampp-control.exe) and start up apache and mySQL by clicking on the start button for each.

Now open your web browser and test the installation by entering http://localhost into the address bar. You should be seeing something like this (you may need to click on the 'English' link first)...


click on the phpMyAdmin link in the tools section of the left hand menu to start up our database manager.

Before we can start entering SQL statements we need to create a new database to work with.

In this screenshot I'm about to create a new database called fred (you can click on the image for a larger version).

Now that we have a database we need a couple of tables and some data to play with. I've put together a little file to make this as panless as possible. Download ICAU4205A.sql and save it on your computer.

Once you've got it, click on the 'Import' tab at the top of the phpMyAdmin screen, browse to the file and click on the 'Go' button on the bottom right of the screen.

phpMyAdmin should do its magic and report back that "Import has been successfully finished, 16 queries executed." You should also see 5 new tables listed in the left hand column.

Time to get down to business.

For the next couple of weeks we're going to work through James Hoffman's Introduction to SQL

This week, everything up to the section on joins. Click on the 'SQL' tab at the top of the phpMyAdmin page and type in each of the examples in the document. Play a bit, have fun, and tune in here next week for another exciting installment...


Image: 'OINK! OINK!'
http://www.flickr.com/photos/49968232@N00/51679641

Debugging challenge

Spot the fault...

Assessment for the subject: Locating equipment, system and software faults will consist of a document listing various JavaScript faults, how they present themselves, what caused the error and how to fix it.

Run through this list of debugging challenges and choose 2 or 3 from each section: Lexical Errors; Syntactic Errors; Execution Errors; Logic Errors. Write up a short description of the problem (how it presented itself), what you found and how you fixed it. Screenshots would be handy.

---

Original image: 'Fixed' http://www.flickr.com/photos/27384730@N00/109566859
by: Mike Fernwood

fine tuning

We finished automating processes last week, looking at breaking down larger programs into sub-routines and procuedures. Next week we'll put the final nail in with a short quiz.

We followed that up with a look at functions and objects in JavaScript (which wasn't all that interesting), and revisited variables and data types (which was more relevant, if no more gripping)

We finished up with another look at locating equipment, system and software faults specifically, task 2: obtaining fault finding tools. To be honest, I'm not all that happy with these course notes (the readings are fine, but the activities seem too nebulous) - so I'm going to revert back to my original plan for this subject - concentrating mostly on debugging code, with a passing nod at equipment and some discussion of systems.

So, for task 2 I'd prefer that people investigated options for debugging JavaScript - either in the browser or using a stand-alone solution. Write up a blog post that discusses the options available for your platform of choice. Don't forget to include a description of that platform - versions and types of operating system and browser (if applicable).

The report should be about 500 words in length and should be ready for comment by next week.

Speaking of next week - we're going to make a start on 'Run standard diagnostic tests'. I had planned on testing web site performance, but have been told that the Cert III I.T. class will be attending the class too - and they've got no prior experience with web technologies, so we might need to take a different approach. Given that we've only got two weeks to cover the subject this will be a busy lesson - so don't be late :-)

---

Image: 'scroll & peg'
www.flickr.com/photos/46534015@N00/1899595427

looping

Last week saw us spiraling out of control... exploring loops.

Try these revision questions, and a new, improved cloze test on while loops.

We also learned how to use JavaScript to validate a form on a web page, looking at form fields and loops in the process!

Finally, we started on the first task for Locate equipment, system and software faults... Identifying appropriate information gathering techniques

---

Image: 'Vatican Museum Spiral Stairs'
www.flickr.com/photos/57954193@N00/202549889

thinking back on it

revising last week's programming lessons...

• a short quiz on selection


• a cloze test on conditional statements


• questions about definitions and data types


• fill in the blanks on data types

---

Image: 'thinking'
www.flickr.com/photos/83476873@N00/110993877