Facilitated by @ruby_gem and hosted by @phpcodemonkey, the first Preston CodeJo was held last night at Magma Digital’s offices on Winckley Square. Using themed ‘katas’, this is the first of an open-ended series of events designed to challenge and extend developer abilities and interaction across programming/development disciplines.
This month’s kata asked attendees to use a Test-Driven Development (TDD) approach to solving a simple problem using the Ruby language.
Sunday’s track choicesMy second day at the PHP North West Conference 2011 kicked off with Paul Lemon’s ‘Feeling Secure?’ talk.
Paul used succinct code samples and made a point of covering the basic attack methods, assuming no great depth of knowledge for some and the need to re-iterate its importance to the rest of us. For each attack type, variant methods were demonstrated that perhaps would have been unfamiliar to some – this was certainly borne out during the Q&A session. Paul had far more topics to cover and hopefully there’ll be an extended security presentation at a future conference.
Following this I attended Walter Ebert‘s talk on URL design. Walter had gone to some trouble to locate examples of good practice in human-readable, RESTful web addressing as well as some neat workarounds for common problems – for example url handling routines for those long descriptive links that email clients break when they wrap text.
Finally I listened to Richard Backhouse talk about compiling PHP to .NET using open source tool Phalanger. Richard covered the background to his company’s adoption of the approach, client considerations, use cases and opportunities for mixing languages & libraries for a best-of-both approach.
I tend to take away both strong themes and important (though sometimes small) messages from conferences that stick with me, influencing the design decisions and production routes on current and future projects. They’re not always from a favourite or most enjoyable presentation, but they highlight the event’s greater whole.
Laura Beth Denker‘s Saturday track 1 talk emphasised the need to retain practicality and perspective in software production (in particular, testing). Yes we have the tools, but are we using them effectively, are we curtailing our own faculties in favour automated methods, do we put enough trust in our collaborators?
The major frameworks has a strong showing, but Alistair Stead and Paul Lemon provided timely reminders of those areas that still require careful thought and action – response times, the right caching techniques regardless of chosen technology, the importance of validation and knoweldge of protocols and security basics.
Finally, Ian Barber‘s keynote brings all this together – the tools exist to allow you to contribute to great developments and create new ones. Use the right tools for right purpose and keep a keen eye on what’s around you – in programming, and in the wider world.
PHPNW11 was all about (as @Elblinkin put it) ‘Keyboard, mouse and You’.
The PHP North West conference gets bigger and better every year, and 2011 sees the Saturday and Sunday conference enlived by a Friday tutorial day and an unconference running alongside the scheduled tracks.
Saturday morning kicked off with keynote speaker Ian Barber‘s revealing tour of the small steps that made great software even better, and the ways that diverse personal interests, hobbies and a willingness to ignore conventional wisdom led to innovations that we in turn can build upon and contribute to.
Having a broad range of work and hobby interests, I could only agree with Ian on his belief in cross-fertilisation of ideas and approaches, and it was good to be reminded that being interested and aware is often more effective than aiming high.
Starting off Track 1, Enrico Zimuel introduced the new features and architecture of Zend Framework 2 followed by Sebastian Bergmann‘s talk on PHP Testing tools. Sebastian compared the various approaches and features of the most ubiquitous and newly released tools including his own project PHPUnit , the Atoum framework and the behaviour / scenario driven BeHat.
In the afternoon I attended Alistair Stead‘s track 2 talk about the Varnish reverse proxy cache. In addition to presenting Varnish’s impressive capabilities, Alistair examined the pitfalls of adding multiple cache layers, configuration gotchas, as well as privacy and security concerns in good depth.
Track 2 continued with Stefan Koopmanschap‘s introduction to the recently released Symfony2 framework. For those of us with experience of prior releases, Symfony2 appears to differ significantly and will take some getting used to. The Bundles approach follows the components theme running through the conference this year.
The final talk in track 1 was Laura Beth Denker‘s ‘Are your tests really helping?’. After informing the crowd that her company pushed code every 20 minutes or so, you would have expected a breakdown of intensive automated test routines, but what was presented was a practical approach involving well organised unit testing; having faith in fellow developers and trust in the external services (and if you don’t have faith or trust, you should probably replace both) in order to reduce the need for extensive integration and functional testing.
PHPNW11 continues today, Sunday 9th October. Feedback for talks can be read and provided on JoindIn.
One positive thing that has come out of Ideas of March is the number of new posts I’m reading on the blogs I already follow and the new blogs I’m taking the time to read.
Rick Hurst, a fellow BathCamper from a couple of years ago posted his thoughts about Twitter, Identi.ca and a future for distributed social microblogging. Like Rick I hastily bagged my identi.ca name when I heard about the service, but haven’t posted to it in anger. Continue reading
A post in support of Chris Shiflett‘s call for a blogging revival.
I follow around sixty bloggers and blog sites on topics that include the arts (artists blogs such as Martin Greenland‘s blog); alot of web, mobile, application design and programming commentary; Institutional IT views from Brian Kelly, Mike Ellis as well as long form writing about online marketing, data visualisation , typography and graphic design.
There are history and archaeology blogs too. Paul Barford’s Portable Anquity Collecting and Heritage Issues and the Heritage Journal.
I’ve seen and met many interesting people that share my interests, work in my field, or both. Their weblogs provide me with an astonishing wealth of written, visual and auditory entertainment, information and commentary on the things that matter to me.
Such wealth, archived online. Ready to entertain, inform and inspire the next visitor.
Its Alexandria on speed.
Re-birth of the Author
I came to blogging proper in late 2006, I’d begun study for a computing MSc and had begun to dip my toes into Open Source development. I installed WordPress and have stayed with it for the sense of control and ownership of content.
I write about my interests – visual design, photography, painting, history, heritage issues, archaeology and on occasion personal things – usually the joys.
I also write about the events I’ve attended and the technologies I am using, evaluating, or developing in my role as a Higher Education web developer or for other projects. I enjoy sharing the things I find out and on occasion they assist others too.
This month I’ll be writing about the personal goals and challenges I have ahead of me. I’ll be rounding up the threads about the recently launched Guerilla Gardening the Institutional Web Course Finder UX project I kicked off many moons ago, and perhaps write some more on the PHP frameworks I use.
Back in 2009, I examined the way in which courses could be listed and searched for at my University and developed a prototype user-interface to increase the visibility of each course we offer.
Things began as a personal project carried out in spare time – an ‘unofficial, unbidden and unapproved endeavour’ I described it back then – with the aim of creating something demonstrably useful that could be further developed.
The design and prototyping was extensively blogged at the time, and the first prototype demo’d (to a packed tent 
) at BathCamp BarCamp 2009. You can read more about the UX design in the following posts tagged guerrilla-gardening. In 2011, development of the interface has finally begun in earnest.
The greatest limitation at inception was available data. Course information was coming from a content-managed JSON source and provided only course title and web-page URL. It must also be understood that while there is knowledge of formal course data formats, we have none in use that combine course and marketing information. Thankfully, a separate project to manage course web-page delivery through Microsoft Sharepoint has allowed full database access to extensive course information.
Here’s how things looked in 2009:
Scrolling the Course Listings by starting letter
The first change is that we’ll be concentrating on undergraduate courses, so no tab structure.
Secondly, we had a rather ugly switch from course title lists to a title + summary listing from the Ultraseek search API, but the more reliable data source has changed that.
The latest incarnation treats course listings as definitive course records, so when an as-you-type filter phrase is searched for with a click of the search button, the results aren’t re-presented but they’re used to augment the existing course listing with a summary of text from the live page.
Thirdly, stakeholders in the project agreed that being able to update the list the moment you type a letter means we can do away with the row of alphetic teeth that previously mirrored the Content Managed A-Z list pages (they’re days are numbered too).
One new feature on-the-cards is sorting/grouping by faculty, again afforded to us by better data. This should allow for a lightweight, low overhead means of seeing related courses, grouped by faculty and highlighted by the corporate faculty colour.
As-you-type filtering narrows the list as before, but also updates a match count and six other course counters for each displayed faculty.
Type ‘engineer’ for example and you see the bulk of courses under the Faculty of Technology, where you may find other courses related to your area of interest. Type ‘forensics’, and you see courses across Business, Technology and Science, inviting you to examine their differences.
The bulk of the code is still classic ASP (I know, I know). jQuery has replaced Scriptaculous/Prototype for the client-side interaction, a design choice primarily, but also a matter of support knowledge.
Basic course listings are served in an unordered list for static-page accessibility, and they’re then enhanced with JSON-based detailed course information. We’ll be popping the scrolling list to full height for compatibility with mobile devices in the short term.
Of course, the JSON formatting of detailed course information by faculty is an opportunity in itself.
We’ll be using Google Analytics, our tracker of choice for some time now to see if this makes a difference, which given the tens of page loads we’re saving ought be significant. Track Events will also be used to assess every client-side interaction with the Course Finder to inform its future development.
It is hoped that as-and-when it goes live, faculties should be able to link directly to their own listings in the main marketing courses area, so eliminating the need for duplicated content in the CMS. An upgrade to IISÂ affords the opportunity finally get course titles in the URLs using something akin to Apache mod_rewrite.
Deployment is imminent.
I’ve read a few things in the last week about Oxford’s Mobile App – mainly tweets about #ucisa10 and various follow-up blog posts – so thought I’d have a look. I am particularly pleased to see that their well put together and well received mobile provision is a web app rather than a native app or proprietary service offering.
Critically this development route and the technologies applied affords them every opportunity to improve, amend and react to criticism and suggestion both quickly and simply.
Even better, they’re using services such as Open Streetmap for their location services, various location code mechanisms and the supplemental use of QR Codes and barcodes.
Looking around the m.ox.ac.uk app site you find some interesting solutions.
For the Iphone and browsers such as Opera Mini (for Windows Mobile), they’ve re-used their homepage iconography to create short, meaningful breadcrumb navigation as you drill deeper.
The risk of lengthy trails is eliminated with the use of ellipsis characters ( … / …).
They’ve a desktop site for previews, information on data costs and usage. A very thorough approach.
More info’ about developments on m.ox.ac.uk can be found at: http://m.ox.ac.uk/desktop/#blog.
Skip to the Ten Things>>
The launch of the iPad has reinvigorated discussion on the use of small(er) scale devices. with particular interest from the UK HE sector. This may be partly attributable to meeting the technological expectations of students, as well as the constant problem of discovering just what they may be.
A discussion kicked off by Brian Kelly, the UK Web focus at UKOLN highlighted the appeal of Apple’s devices – in particular their UIs (discussion on just how revolutionary the iPad hardware is being beyond the scope of this post ) – and how they made some open source advocates think twice. The limitations of software sources (the App Store), the missing technologies such as Flash, and the pitfalls of the approvals process may be outweighed by the device’s promise.
The primary thinking on development for these devices is native, so discussion rarely looks at the most prevalent platform available to iPhones and iPads: The Web, plain old HTML.
This article on O’Reilly Radar was posted in a follow up to Brian’s topic and goes some way to explain the opportunities that Mobile Safari and HTML 5 offer, and what may be achieved when extend with Javascript libraries.
Apple have allowed web developers the techniques to ensure that web apps integrate with their devices as seamlessly as native apps. Home screen icons, full screen viewing, inline data loading, geolocation, offline data storage and multi-touch UI capabilities are all achievable using conventional web development techniques. They’re also very well documented on Apple’s site.
There’s nothing new here, so if you’re familiar with the technology already there’s little to excite. However, reiterating these points may highlight just how accessible this technology can be for those in the front line of web-based information provision.
For more on the App vs Web App debate, take a look at earlier discussion on the QuirksMode Blog.
Below are a number of features web developers can use right now on the Iphone and Ipod Touch to make their web apps run as smoothly as native ones.
Once a user has visited your web app, they can choose to bookmark it. If they select to bookmark it to their device home screen, an icon based on a preview of the site will be placed there.
If you don’t want a site preview for your icon, you can create and embed a custom icon in your HTML code which will be picked up when your web app is bookmarked to the home screen.
<link rel=”apple-touch-icon” href=”apple-touch-icon.png”/>
A single line of code in your HTML turns a web site into an web app. Once a user bookmarks the page to their home screen, the developer is afforded the trust to run a web app full screen, with no Mobile Safari UI visible:
<meta name=”apple-mobile-web-app-capable” content=”yes” />
Clicking on a link from your web app will invariably switch to Mobile Safari – but there are ways around it. See design decisions further down the page.
For Javascript support Mobile Safari can be treated very similarly to desktop browsers. You can use JQuery, Script.Aculo.Us and Prototype to your heart’s content. Additionally there are device specific events and features you can access, and dedicated libraries for Iphone development, such as JQTouch.
Using these libraries gives you improved control over the DOM elements for updating areas of your App page and makes data handling far simpler.
The Touch UI is available by default, but extending your web app with JQuery and the JQTouch plugin allows you to create multi-touch interactions such as scaling and rotating web page elements and even throwing them around the screen, should you need to.
When the device is rotated, Mobile Safari will rotate the view accordingly, you can anticipate this in your CSS.
You can control how the screen behaves in terms of width, height and zoom properties using custom <meta> elements.
See the Apple Dev Centre guide to supported meta elements.
As with other modern web browsers such as Firefox 3.5+, pages in Mobile Safari can request location information from a user. If provided this can be used to customise content based on location, putting custom maps, location pushpins and site-specific news alerts into the web developer’s toolkit.
This is especially useful to HE institutions with their need for Campus Maps.
Desktop Safari and Firefox 3.5+, and Mobile Safari all implement some if not all of the W3C Geolocation spec, so geolocation apps need only be written once for these browsers.
Mobile Safari automatically makes phone numbers clickable. Embedding phone numbers in a basic <a> link can allow an Iphone user to start a call or send an SMS message with a click or to, just like the email Mailto.
<a href=”tel:11111111 “>Call now!</a>
It doesn’t have to even look like a web page.
Developed by Apple and now becoming widely adopted (a Google Code add-on, Explorer Canvas, ports most of the features to internet explorer too) the <canvas> tag allows scripting of vector shapes, the embedding and alpha transparency of images; repetition, scaling and rotation are all possible in page scripting.
This cuts server-side imaging libraries out of the loop for the data-driven site and brings code-based imaging and animation direct to web browsers, including Mobile Safari.
Using the Iphone and Ipod Touch Caching capabilities, you can cache commonly used elements of your web app, such as the main User interface files and images. You can then control when they’re updated.
Additionally, you can cache data offline using the Javascript/SQLite databasing tools.
To keep a web app fullscreen it needs to stay on the one web page, and perform all subsequent data interactions using asynchronous requests.
By treating the one page as your bookmarked web app, you can supply data in RSS, JSON or just HTML over AJAX to update elements of your page.
You get to manage just one beautifully crafted home URL, cached with it’s component images and scripting, and link everything from it. Using a manifest file, you can then cache your UI on the device, so future loads are minimal.
Web apps aren’t a panacea, there are of course things that you cannot yet acheive in Mobile Safari. Access to the accelerometer is currently unavailable, so shake actions, tilt detection and so on are out of reach, as are Apple push alerts.
How limiting these features are is dependent on what you’re trying to do, and what your user base expects. Custom tilt and shake actions are by their nature new functionality from the user perspective.Their appropriate application must be carefully considered by the developer and for end users how they operate must be learned or discovered, per app.
Screen interaction, for simple content delivery remains the most reliable and understood method of interacting with information on these devices.
Apple Push Alerts are again, limited in their use. The alerts notify the user with a short message, impressing upon them the need to launch the associated app to have it update with new information. The app can then be launched with click on the alert box.
However native apps, like web apps, do not update information in the background, they must be running on the screen for them to retrieve new data.
If there’s any conclusion to be drawn, it’s about understanding the technology and it’s appropriate application. There’s also the requirements of support availability, installation assistance, speed of updates and bugfixes to be considered.
If the above features are sufficient to deliver your content, then they also afford the opportunity to design and build killer interfaces to it, with just a few limitations.
More information on custom icons and web app configuration can be found here on Apple’s Dev site.
Of course if you’re thinking augmented reality, you might want to go native.
Work on the Course Finder has increased, now it has been positively received. I’m now working to improve the usability even more, and ensure reliable data sources can be put in place, along with workflows to manage them. Here’re some annotated shots of the current state of development.
The default view will load Undergraduate Courses, or the previously chosen award type if you’re returning from other pages. The Course List will be to view.
What you'll see on first load
Where previously A-Z Letter links would filter out non-matches, they now simply scroll down to the selected point in the alphabetised course list.
When the Course JSON file is first loaded, and on each subsequent load, checks are performed to see which letter of the alphabet is not represented (we have few courses beginning with ‘K’, for example), and those letters are greyed out.
Scrolling the Course Listings by starting letter
As planned typing in the box filters the Course List. Now a message appears reporting on the number of courses visible compared to the total count. Clicking the ‘X’ in the field will clear it, and restore the full list. Clicking an A-Z letter will restore the full list and scroll as required.
As you type, the part of the Course Title where your phrase appears is highlighted in the text.
Filtering the Course Listings by key words
This feature has been a long time coming. Search results are loaded via an XML-to-JSON filter script adapted to limit the search to the selected award. Title, relevance score and a basic summary are displayed. The JSON data contains everything needed to paginate the results, a feature that will follow. The script returns the data within an XJSON header which is then parsed into place on the page.
Rendering live search results inline
Showing Course search results gives rise to layout issues: where to put the Course listings and how to differentiate between them. Sub-tabbing was one option which was discarded, and in the end the choice was to shift the Course listings down the screen and to put Search results in their place, with a button to close them and restore the prior layout.
Search results use an alternate list style too, to highlight the expanded information available.
Switching to another Award Type hides (gently…) any visible Search results and restores the default listings view, loading the appropriate set of Courses.
Iphone version: Select Course Type. Select Course from A-Z list
Course Finder Demo App for Iphone
Here’s the Iphone & Touch version of the newly spruced Course Finder. The function is far more simple than the conventional web version, just select your award and then locate a course from the list.
The labelled buttons and alphabetical list format closely mirrors the Iphone’s internal layouts. The latter was achieved quickly using the excellent Contact List on Webkit package from cubiq.org.
For this project to be adopted it will need to be presented with full corporate branding. Something I have thus far steered clear of. However, the greater task of search integration is my next priority.
For full details of the project click here: Guerilla Gardening.