DAT204: background and asset design for Blue November HTML5 canvas game groupwork

As part of our groupwork for HTML5 canvas game development, I was commissioned by the team to design a background for the game, Blue November (link: http://giantkiwi.co.uk/sites/aotbn/). I've designed the background using Adobe Illustrator, and made use of Bézier curves to emulate the waves, as our game takes place in the sea:

In addition, I've also vectorised an existing asset that will be used in the game's introduction page. Because the carrier needed to be simplified, I've toned down the details:

DAT202: Research into the HTML5 platform for our educational application

As part of our assignment for the Creative Industries module, we were given a task to produce an educational application for a charity that promotes expeditions. Our client, ETE (Education Through Expeditions), are about to go on an expedition to mark the Queen's Diamond Jubilee by going to the highest point of the British Commonwealth in the Arctic Circle (source: http://www.etelive.org/content/contentete.numo?id=172). We decided to base our application on this expedition, as it provides an insight into the facts about the expedition, the area and wildlife, to the application's intended target audience: school children.

Because there's no restriction as to what platform we could use to base our application on, I came up with the idea of putting the new HTML5 platform into good use, not only because we already have another module that is teaching us about the platform (specifically <canvas>, the main component of which has been highlighted as a replacement for Flash), but also because we saw it as a perfect opportunity to break away from the confines of using proprietary media, and reinforce our learning of the platform at the same time.

To break down the research I've done on HTML5, here's a SWOT analysis:

Strengths:

• HTML5 is a new platform that introduces new features never seen before in the history of the HTML standard
• HTML5 is platform-independent; it works in browsers that support it, and in fact, a vast majority of browsers in use today already support it
• <canvas> is especially important, because, for rich, dynamic media content, it reduces the need for Flash as many capabilities, such as animation, can be used inside the tag

Weaknesses:

• Not all browsers support the features in HTML5, especially some of the proposed features
• <audio> and <video> does have compatibility issues, due to different browser developers favouring incompatible standards over established standards, although the issues are being eliminated within time as developers are still deciding on a final, agreeable standard
• One aspect that was highlighted was that some schools may have neglected to upgrade their browsers, although with support for IE6 being discontinued and some schools even moving away from Windows, the uptake of HTML5-compatible browsers are increasing

Opportunities:

• HTML5 will eventually replace Flash and other plugins for many purposes that HTML5 replicates, such as rich media
• HTML5 has a lot of potential to mature into a platform that will eventually eliminate issues in a completely open-source environment

Threats:

• Complacency in the industry and schools means that uptake of HTML5 is still slow, and with the aforementioned issues regarding compatibility in <audio> and <video> due to differing standards, Flash still remains dominant
• Until schools start upgrading their systems, market share for HTML5 will still be in a niche

DAT204: Application complete!

After 3 nights dedicating the whole weekend to the assignment, I have finally completed my semantic application. Since the proposal back in November, the project has come a long way, and with a design change occurring half-way, the result looks very promising, and does hold a lot of potential as to how this application can change the world.

The Introduction page is dominated with a profile picture and a brief introduction underneath it; the rest of the introduction is done in the Personal Profile. The content is marked up using XML in a polyglot environment (except for the addresses in the Contact page, where there is already a HTML5 semantic tag associated with it), and the content have CSS3 background transition effects to provide emphasis, which helps employers to easily read the content, especially in environments where processing of applications in a swift and timely fashion are required. The content box is styled natively using CSS3, as is the text in the AJAX tabs, and in terms of AJAX, it is used (with JQuery magic) to display the content in the same page from separate HTML files without having to go to another page.

Adding to the easy-to-use nature of the application, the content pages are formatted in a way that even the less-experienced users can easily populate the pages, provided that they have at least a plain-text editor and some knowledge of HTML (the custom XML tags are already provided for the user), because the main CSS file already provides the styling for the content, so whenever it appears unformatted in a WYSIWYG editor, the content becomes styled once it is loaded up in the application.

Overall, I've managed to produce an application that has a lot of potential, and even though I've already seen many examples of online portfolio websites, this semantic application has a lot of potential to impress employers in the professional world...

To view the application, click here: http://www.elnormo91.co.uk/semanticapp/semanticapp.html

DAT204: Evolution of the design

After trying to make the website work with the originally-proposed design, I've then decided to take a different approach. Whilst trying to implement as many CSS3 features as possible, I've then discovered something that can make the website very lightweight yet powerful; in addition to the existing polyglot markup approach, I've also discovered the wonders of JQuery and AJAX.

The JQuery will be used to make the Edit dialogue hidden until the user clicks on it, and the AJAX will be used to paste the content from separate HTML documents making up the pages into the same website, via the use of tabs, without having to go to a separate page, replacing the need to press backwards whenever the user wants to go back to the previous page.

In terms of interface, I've decided to change it to one that can relate to businesses very well, with the content of the eCV centralised, so then more emphasis can be placed on the content, and with the tabs linking to the different sections coloured in a rainbow-style scheme, in a similar fashion to how Filofaxes are sectioned by colour code, or how some documents are bookmarked, to make the sections easier to remember. The goal that was envisioned in my specifications was to create something similar to Zerply, with a more business-oriented interface and a standardised layout.

DAT204: Laying down the foundations and tightening up the ratchet...

So far, the foundations of the semantic application has been laid, and what was originally the empty shell of an app that has yet to see the light of the day has now started to progress. In terms of the app, I have chosen to include XML in harmony with HTML5. Despite it sounding like a rather uncanny marriage, the ability of using custom tags in HTML5 is still there, and even though XHTML was going to be the future, the clear direction was that HTML5 eventually emerged to become the winner.

However, the idea of 'XHTML5' still hasn't been put to the metaphorical bed yet, and as this application shows, the idea of XML semantics with the many features of the HTML5 platform can still be a good one.

As the Christmas holidays are starting to just come around the corner, the work still doesn't stop; the next part is to get the graphics sorted out and figure out a way of getting the content in whilst adding in the wonderful HTML5 features.

DAT204: Assignment 1: Semantic 'Killer' Application (20% of the module)

For our first project of DAT204, we have to create a 'killer' web application based on the latest web standards (HTML5 etc.) and semantics, that will be very useful for a given task (e.g. a portfolio that is easy to use, graphically attractive and descriptive, hence the usage of semantics).

Semantics are used to make data more descriptive, because, in contrast to humans, computers need to interpret the meaning of data, and in its plain form, the computer doesn't understand straight away. In HTML5, semantics are used to describe the elements and layout, and in contrast to past versions of HTML, HTML5 does not require certain attributes, such as declaring JavaScript in the <script> tag (as JavaScript, by default, is the standard scripting language in the HTML5 platform), and mentioning the XML namespace in the <html> tag.

My initial idea is to create a 'killer' portfolio platform that is very intuitive, simple and easy to use, yet at the same time, is powerful and graphically attractive. My portfolio application is going to be 'the ultimate CV', which will be integrating a workbook, a gallery of practical work, a personal profile and SEO to make the website the first destination for any potential employer, especially those that are in the creative industries, in which this application is aimed at.

Mock-up 1: the workbook page

Mock-up 2: the cover page (i.e. the first page the user sees before proceeding to other pages, as per Mock-up 1)

Although the idea of portfolio websites aren't new, and have already been done, my semantic application is going to take it one step further, and become the CV of a potential employee, replacing the traditional paper format, and also being optimised, so in case the employee is 'Googled', the SEO used in this 'killer' semantic application will be optimised, so then the problem of being faced with an unwarranted social media presence (where it would be bombarded with personal opinions and photographs that, depending on the situation, can make or break one's opportunities) will be eliminated, so then the more professional side of the person takes precedence over one's personal side, especially since, even with, for example, your Facebook profile is set to private, friends may not be bothered to set their profiles to private, and anything unwarranted (e.g. unusual photos of nights-out) tagged with your name can cause problems.

DAT204: breaking the Web Core Fonts mould with HTML5

Today, I delivered a demonstration of the advanced typography features in the HTML5 platform. Before the advent of the HTML5 platform, web designers are limited to a selection of fonts which are available on the client's computer, or using images for header banners and text content, which can be very labourious for both the browser and the internet connection to handle.

Even though with the advent of faster broadband internet connectivity, it is a lot faster to load them as actual text rather than images, but even with that, there is little that can be done when your range of typefaces are severely limited as not every computer would have them installed, and Web Core Fonts were designed to provide a standard range of fonts for all platforms that are installed by default. With HTML5, it broadens the range of fonts you can use on a web page, and most of all, they are accessible via the server side, so the only requirement would be for the browser to support the font-face rule of CSS3 (as well as obviously, HTML5) and for the font to be placed in the web page's root directory, saving the need to install a font on the client's computer, and for the use of the rather limited Web Core Fonts.

Although font-face has existed since CSS2, it hasn't really been promoted as a feature until CSS3, when it addressed the initial problems regarding the need to use a proprietary format rather than the more widespread .ttf and .otf formats.

In addition, there are much more possibilities that are contained within the whole platform, and this includes varying the CSS from a HTML5 form and using semantics to define the attributes and properties, as well as many other graphical features to name, but a few.

The example I used for the demonstration is Apple's HTML5 showcase: http://www.apple.com/html5/showcase/typography/ (requires Safari, as it uses Apple's interpretation of HTML5, although the whole platform is a draft at the moment. It may change as soon as Gecko and other browsers increase support). Another good example of HTML5 typography is at: http://www.html5rocks.com/en/tutorials/canvas/texteffects/, which also, conveniently, explains the graphical capabilities of typography in <canvas>, which will be touched upon in Term 2.

General: I'm back

After a rather eventful (or not) Summer, I'm back like Mark Morrison, and so far, it has gone off to a rather good start. The biggest highlight so far is the introduction of HTML5, which has been long in the making, but finally, it is being realised in Y2. On the same subject of HTML5, I will be making a dedicated blog for this purpose, so please, do watch this space...