• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 101
 

HTML5 101

on

  • 5,527 views

HTML5 - what is it? Why is it important?

HTML5 - what is it? Why is it important?

Statistics

Views

Total Views
5,527
Views on SlideShare
5,517
Embed Views
10

Actions

Likes
4
Downloads
0
Comments
0

3 Embeds 10

http://iml.isobarkorea.co.kr 8
http://localhost 1
http://pinterest.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 101 HTML5 101 Presentation Transcript

    • <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 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