Introduction to HTML5

HTML5 is the next iteration of the technology used to structure and present content on the World Wide Web, short for HyperText Markup Language. Although most of the elements are already defined by W3C and implementable, it is not due for W3C Recommendation until 2022.

A major advantage of developing in HTML5 is as a replacement for Flash in graphically rich websites. Currently, if you visit a site with moving or slanted graphics - it will most likely be developed in Flash. The reason for this is that HTML 4.1 and below has very little graphical functionality in comparison to Flash. A good example of this is the German HTC website: http://www.htcsense.dk/(as viewed August 2011). In classic HTML, this site would be impossible to create due to the slanted angle of all the images. HTC have decided to produce this site in Flash, although exactly the same effects can be produced in HTML5.

Over the coming years we believe more and more web development agencies will choose to produce sites in HTML5 where they would otherwise have used Flash.

In summary the main advantages of using this over flash are:

a) Expense

Flash technology is owned by Adobe. As a developer, if I want to develop a Flash website then I would need to purchase the development environment from Adobe. In actual fact the majority of development agencies will already have purchased the environment needed for Flash development. So this argument really only applies to bedroom developers and students, who will either not have the funds for the flash IDE, or not justify the purchase as these people wouldn’t see the any return.

Although the above may seem of little importance to the website business owner, from a developer’s perspective it is crucial to allow new developers easy access to such tools. Otherwise there will only be a minority of developers able to create feature rich sites, and thereby depreciating the quality of the internet in general.


b) Availability

As most techies are aware, iPhones do not support flash. This is because Apple likes to maintain a strong hold over their hardware and the software that runs on it.

As Flash is a development platform, Apple will not allow it to run on their mobile devices, so any websites that use elements of flash will not render properly. Replicating any flash elements in HTML 5 allows much greater accessibility to a site using a smart phone.
It might also be worth considering the effect mobile HTML5 could have on AppStores in terms of mobile site versus applications. Using HTML5 could potentially allow a user to develop an accessible website for a smartphone without losing any functionality, due to its wide range of tools.

If a developer could run a flash application on an iPhone they could open up a means for uploading other homemade applications onto the phone, thereby diverting traffic away from the Apple Appstore (which turned over 1.7 billion dollars last year).


Another comparison to make is HTML5 “web application” and the standard desktop application. Due to other capabilities introduced in HTML5 it has become easier to create rich functionality in HTML5 web application which previously would have only been available to Desktop application developers. Such things as Web SQL Database Storage (which allows SQL style databases to be embedded into web applications) and Web Workers (provide a means to perform processor-intense tasks) open the door for larger web applications with greater functionality, without the need for installation.

Further thoughts on HTML5 from our technical team include the following;

• As time moves on, HTML5 will take over the internet as the generally accepted standard for webpage markup.


• Unlike the last release of XHTML from w3c, HTML5 does not try to impose rules on developers but rather increases our toolset.


• HTML5 will also allow for much cleaner and consistent coding using the new elements and attributes.

There’s already a load of great examples of what HTML 5 can do, for example this collection of experiments on hakim.se, or this fantastic take on a twitter feed by 9elements. Currently HTML5 isn’t supported by older browsers, so the above links may only work using newer versions of IE, Firefox, Chrome and Safari.

The Rocktime Web Development Team is always working on innovations and bespoke coding to improve our client websites, microsites and online presence. Please give our Sales Team a call on +44 (0) 1202 678 777 to see how Rocktime can help you decide where using HTML5 can be of benefit within your marketing strategy.

Author: Dan Griffiths

IFrames and Facebook

This month the blog is related to topics that the Rocktime Technical Team discuss. In this blog Craig talks iFrames and Facebook. Think of it as a 'Window within a browser'.

Facebook, as of February 2011, officially allowed the use of iFrames; allowing users to build fully customised facebook pages for their custom page tabs.

An iFrame is a section within a web page that can display another web page. This will allow for externally hosted web applications such as shops, forums, booking forms and more to be included on a Facebook Page.

iFrames allow for more flexibility in pages compared to the FBML (Facebook mark up language) which is now being depreciated; old pages using the FBML will still function however all new pages will have to be created using an iFrame.

FBML was developed to enable users to build Facebook apps that integrated into a user's Facebook. Currently, Facebook app uses iFrames to integrate website content into your Facebook page. It can do whatever a normal webpage can do.

The key advantages of using iFrames include:

• Traffic driven directly through Facebook
• The use of Analytics software
• The use of CSS and your own code, allowing for full brand integration and increased functionality
• embed video
  

To find out more about iFrames and how you can integrate your webpages into Facebook, please talk to our Sales team. Also you may like to note that the majority of our Content Management System modules have the ability to be fed into Facebook via a Facebook Application. The Facebook Application will render as an iFrame, which will stream content directly from your website.

The Flashlight team will be promoting our integration of our Competition Module with Facebook, so if you have this module, then they may be in touch soon to enquire about an update.


Author: Craig Sherlock

Don't bore the search engines with duplicates

Google use canonicalization to pick the best URL when there are several choices, for example the home page may present:

mysite.co.uk
www.mysite.co.uk
www.mysite.co.uk/index.aspx

Most people would consider these as the same URL, but technically they are different. Google will canonicalise a URL which means over time they will pick the one they think is the best.

You can make sure that Google picks the URL that you want them to pick, your preferred URL by using 301 redirects to tell the search engine the page has permanently moved (a 302 is a temporary move) you can also assist search engines by making sure all your onsite internal links point to the correct page.

If there are pages on your website that show identical content but different URLS due to tracking parameters, category navigation and comment parameters, then there is a way to tell the Search Engines which url you would rather them store. Within the code (behind the website) you can add a tag to specify your preferred version.

This standard can be adopted by all search engines crawling the site and URL properties such as page rank and related signals are transferred.

How this is displayed is outlined below:

link rel = " canonica l" href = " http://www.mysite.co.uk/products/Blue-Pig.aspx "
inside the section of the duplicate content URL/s:

http://www.mysite.co.uk/products/Blue-Pig.aspx?show=reviews

and Google will understand that the duplicates all refer to the canonical URL:
http://www.mysite.co.uk/products/Blue-Pig.aspx

(NB: You can also use a relative path to specify the canonical, also if you include a link in your document, relative paths will resolve according to the base URL)


The hypothetical work involved

1. You could change internal linking on logo (for example) to go to one address ie: http://www.mysite.co.uk
2. Add appropriate 301 redirects example: on the http://www.mysite.co.uk/index.aspx to the default URL http://www.mysite.co.uk
3. Update links to point to a single canonical page to ensure optimal canonicalization results


Speak to Rocktime if you need any further help with this.


Author:Sarah Griffiths