Tech

Tech

Rick Ogden

5 Cool Things in HTML 5 for Mobile Web App Development

Following on from my previous HTML 5 article, I decided to write another one talking about a few cool things that HTML 5 brings us which help us develop cross-platform web applications. Although not all devices support HTML 5 at the moment, it is increasingly becoming the standard due to its relatively low resource consumption and accessibility.

Canvas

Canvas is pretty much what it says on the tin, it is an element which can be used by JavaScript draw draw graphics on-the-fly. These graphics can range from static graphics (such as graphs), to animations all the way through to fully rendered 3D images using WebGL. The idea of canvas is that it’s a blank canvas for you to work with.

https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas

Audio/Video

HTML 5 introduces the audio and video elements. These elements are used to embed audio and video content into your website. As these are raw media files (unlike Flash which includes its own player), it relies on the web browser to be able to decode and control the content. Standard still has not been agreed upon, with some browser developers wanting to use Ogg (the open standard), and others wanting to use h.264. This currently makes it difficult for developers, so while we’re waiting for a clear victor, it’s probably best that we include both!

https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox

Offline Caching

The problem with web applications is that they require a continuous internet connection. This can become even more problematic when using mobile devices, as there may be no guarantee of coverage (particularly if the user is on the move). HTML 5 solves this problem by using offline caching. Using manifesto files you can tell a browser what files it should cache, what files require an internet connection (ie. shouldn’t be cached) and a fallback if content is not available. This can also be used to reduce the need to communicate back to the server continually, thus saving you, and the user precious bandwidth.

http://www.webreference.com/authoring/languages/html/HTML5-Application-Caching/

Client-side Storage

We are used to cookies being used to store data on the client, but they are rather inflexible. This is sorted with the use of client-side storage. There are a few different types of this: Session storage will store data associated with a particular instance of a website. What this means is that the data is persistent as you navigate through a website, but if you open up another instance of the website (such as in another tab or window), then the session is different. This means you can have different data stored with different instances.

Local storage is more like cookies, however unlike cookies the data is not sent to the server in every HTTP request, it is only retrieved as and when needed. This means that data isn’t unnecessarily sent to the server allowing you to store more data and save bandwidth. The data persists when the window is closed and (unlike session storage) can be accessed across all tabs/windows. The data is associated with the domain.

If you are wanting to store more complex data and be able to search through it easily, you’re able to use a database store. This uses the SQLite spec, and means you’re able to query the database file and retrieve only relevant information to be processed or sent back to the server.

http://www.webreference.com/authoring/languages/html/HTML5-Client-Side/

Geolocation

One of the big things about Smartphones and mobile applications is that they can determine the location of the user, and therefore bring up information relevant to the location. This was done differently by each device and required direct access to the OS API. HTML 5 has standardised the methodology to retrieve the location, and does it by whatever means the device can handle (eg. Wi-Fi networks if the device has a wireless card but no GPS). As this is implemented by the browser, there is no need to (as developers) worry about how the location is retrieved.

http://diveintohtml5.org/geolocation.html

Rick Ogden

HTML 5 Preparation

When setting up an HTML 5 web page, there are a couple of things which need to be done. First of all you need to standardise the CSS for the new HTML 5 elements. This can be done at the top of your CSS stylesheet by making all the new elements be displayed as “block” elements:

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{
  display: block;
}

Unfortunately there is still a range of browsers which still don’t render HTML 5 objects. This means we need to add a JavaScript hack. Rather than downloading or creating your own JavaScript file, you may as well just link to a file that has already been created for you on Google Code. This means that it will always be kept up to date. Also as it is only needed for IE browsers up to version 8, you won’t need other browsers to load it:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

You are then free to start creating your HTML 5 web page!

Rick Ogden

PHPNW10 – An Overview

I had a fantastic time at phpnw10 this year. Met loads of old friends, and made a few new ones. The main conference kicked off on Saturday morning with a keynote by Lorna Mitchell entitled “Teach a man to fish”. This was about how team training is important with proper feedback mechanisms which enable a developer (and a team) to learn from their work and give them the skills to teach themselves further. Following that I went to see Derick Rethans giving a talk on geolocation within PHP. This gave me a great insight into how geolocation/mapping works online and has given me some food for thought for my MSc. After, I headed back to the main track to see Ian Barber speaking about debugging. I find that this is the sort of talk I can’t get enough of, and discovered a couple of cool new tools to help with debugging on top of the existing ones I already use.

After lunch I saw Michelangelo Van Dam talking about unit testing within ZF. Like everything with ZF, it seemed a lot easier than I thought it might be. Then there was another ZF talk in the same room by Rowan Merewood who, as always, gave a rather entertaining talk. It was about Zend_Acl and used real-world examples (ship classes from Star Trek) to demonstrate how they work.

Scott MacVicar gave a really interesting talk on HipHop for PHP, allowing PHP code to be compiled. He went through the process of using it, what the current limitations are and the plans for the future. As this was Scott, heckling was aplenty, and made this talk very enjoyable! Then it was back to the main track for the final session: The Framework Shootout, a panel session chaired by Marcus Deglos. Although there were no definitive conclusions that came out from the panel, it was very interesting to see different people’s take on things, and the strengths and weaknesses of a variety of frameworks.

Overall it was an excellent event with excellent attendance! However we have a bit of a dilemma now. We have reached the capacity of this venue. This means that if we want to expand we will need to find a new one. If you have any thoughts/ideas/recommendations on not only venues around Manchester, but how we can expand further to increase the impact of the PHPNW group, please let me know! Finally I would like to thank Jeremy Coates and all the helpers on the day, the event ran fantastically smoothly and it was all down to you, thanks everyone!