HTML5 101

<HTML5> What is it? Why is it important?

First off, what is HTML? HTML stands for Hyper Text Markup Language It is a language that allows people to create structured documents by denoting structural elements such as titles, headings and paragraphs using HTML ‘tags’ Here are a few HTML tags: <title> <body> <p> <a> In simple terms, think of it as the language that web browsers understand that tells them how to display content on web pages

W3C The World Wide Web Consortium (W3C) is an organisation that is responsible for defining web standards – including the HTML standard They maintain the standards which browsers (should) comply with in order that they correctly display web content - should, because no two browsers are the same…which is the cause of so many headaches for web developers! Over a number of years, HTML has developed and new versions of the HTML standard have been published The latest version is version 5

Key features of HTML5 There are 4 key features of HTML5 that make it stand out The canvas elementcan be used for rendering graphs, game graphics or other visual images on the fly. All done without having to rely on plug-ins. The possibilities are endless. Embedding video used to be impossible without third-party plugins such as Apple QuickTime or Adobe Flash. Thanks to the video element, now it’s possible. It is intended by its creators to become the new standard way to show video online. Sniffing a user’s location is not a new thing on the web. In fact, most websites already to this by means of IP address detection. But this is not always reliable, so HTML5’s geolocation is an alternate method of correctly pinpointing a user’s location. The new idea is to get the location information from WiFi towers and GPS. The offline web applications enable users to continue interacting with web applications and documents even when their network connection is unavailable. The user can, for instance, access email locally without having to connect to the internet or install an external client. Infographic from http://www.focus.com/images/view/11905/

HTML5 graphics (canvas) Try a few of these out (in Firefox!) to see the possibilities with HTML5 http://mrdoob.com/projects/harmony/ http://html5demos.com/canvas-grad http://hakim.se/experiments/html5/wave/03/ http://www.andrew-hoyer.com/experiments/cloth/ http://addyosmani.com/resources/perspective/ Although much of the above can be achieved with Flash – the important point is that no browser plugins (of which Flash is one) are required with HTML5 This is important when you consider, for example, that Flash isn’t available for some devices like the iPhone

HTML5 graphics (canvas) The band Arcade Fire recently released a very impressive HTML5 / Google Maps mashupfor their single The Wilderness Downtown Try this in Google Chrome (make sure you’ve closed all your other apps first!) http://www.thewildernessdowntown.com/

Does HTML5 replace Flash? Not really…here’s a nice little summary…

HTML5 and SEO HTML5 will change the way search engines index content It introduces new tags with semantic meaning, such as <article>, <nav>, <footer> Search engines will be able to use this new semantic markup to treat different parts of the page differently – perhaps <article> content will be deemed more important than <footer> content? So as search engines start to use these semantic tags in their algorithms we may benefit our clients’ sites by integrating them into our sites

HTML5 and SEO Not only that, content that might once have been built in Flash and can in future be built in an HTML5 <canvas> will be more easily ‘indexable’ by search engines So more keyword-rich content could be found by the search engine and attributed to our sites Similarly, with the ability to annotate <video> elements with standard HTML markup, these annotations will also be indexable As opposed to being embedded within the video and therefore unavailable to search engine spiders

Geolocation Could be used, for example, to tell you where your nearest Tesco store is without you having to enter your address Or perhaps find people with similar interests who are near you Imagine all the Google ads you see are for shops within a 10 minute walk from where you sit! If you so consent, you can provide your location information via your IP address and WiFi access point data

Geolocation Try this http://maxheapsize.com/static/html5geolocationdemo.html Can choose to opt-in to share location

Video At the moment, there are a number of ways to play video on web pages – most of which require a plugin HTML5 introduces the <video> tag for playing videos without the need for browser plugins Videos can have styled annotations created with simple HTML elements such as the demo shown here (half way down the page): http://yayquery.github.com/jquery-singalong/ Other useful links: http://www.html5video.org/

So can I put videos in email content? Sadly, that is a way off yet. Not all email clients support the new <video> tag Some clients display a ‘fallback’ image See http://www.campaignmonitor.com/blog/post/2905/html5-and-video-in-email/ for more info

Offline features The offline features of HTML5 mean that websites and data associated with them can be stored locally HTML5 gives developers the ability to create and store data in local SQL databases So web applications could be created that still work when you’re disconnected from the internet

HTML5 and forms The HTML5 standard introduces loads of new data entry input types This means the browser can do lots of stuff that normally needs to be custom-written, like validate an email address or a date Using a combination of HTML5 and CSS, this will mean we’ll be able to highlight invalid form fields without lots of extra coding More info: http://articles.sitepoint.com/article/html5-forms http://24ways.org/examples/have-a-field-day-with-html5-forms/24ways-form.html

Browser support for HTML5 HTML5 is still in its infancy, but many current browsers support some of its features The chart shows you how much each browser supports all of the HTML5 features

Conclusion It’s early days for HTML5 at the moment Browser support will continue to improve – Microsoft’s new IE9 browser (currently in public beta) will bring it’s support up to 60% or more We could start to build on some of it’s new features, but will (for the moment) have to provide alternative content that is backwardly compatible with non-supporting browsers

Useful / interesting links Wikipedia article on HTML5 http://en.wikipedia.org/wiki/HTML5 Demos http://creativeproject.wordpress.com/2010/07/27/14-of-the-best-html5-tutorials/ Lots of useful HTML5 info http://www.franksinton.com/html5-list/ Which browsers support what features of HTML5 ? http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/ http://html5readiness.com/ http://www.focus.com/images/view/11905/

For more information Matt Hardy Digital Director +44 (0)1225 476 066 matt.hardy@realadventure.co.uk @mcrilf @realadventure

HTML5 101

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a HTML5 101

Semelhante a HTML5 101 (20)

Último

Último (20)

HTML5 101