Tuesday, May 29, 2012

A programming prescription: JavaScript tonic

Image: 'the JavaScript Code

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...

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
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:

Monday, May 14, 2012

Developing a mobile web site

Image: 'Traditional English Bow-top horse-drawn wagon

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:

Wednesday, May 09, 2012

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:
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.