Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html 5 Features

739 views

Published on

Slide about introduction to new HTML5 features. For example new HTML elements, local storage and local file access.

Straightforward slide for you who interested to leard brief introduction about HTML5.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Html 5 Features

  1. 1. HTML5<br />
  2. 2. Features<br />New HTML elements<br />Video and Audio support<br />Local storage ◄<br />Local file access ◄<br />
  3. 3. Content Editable<br />Edit html within element with contenteditable attribute<br /><div><br /> <b>to do list!</b><br /></div><br /><ul id="edit" contenteditable="true"><br /> <li>Chandra</li><br /> <li>chandra_oey@yahoo.com</li><br /></ul><br />
  4. 4. Local File Storage<br />Save data and retrieve on user’s browser, no need to access web server<br />Save data<br />localStorage.setItem('todo', edit.html());<br />Retrieve data<br />edit.html(localStorage.getItem('todo'));<br />
  5. 5. Local File Access<br />Read file in users filesystem<br />You can use local file access to preview image in HTML without upload to server first<br />
  6. 6. Local File Access<br />var reader = new FileReader();<br />reader.onload = (function(theFile){<br /> return function(e){<br />var span = document.createElement('span');<br />var input = $('<input type="hidden" name="file[]" />');<br />span.innerHTML = ['<imgsrc="', e.target.result, '" title="'+theFile.name+'" />'].join('');<br /> input.val(e.target.result);<br /> $('#list').append(span);<br />albumForm.append(input);<br /> //$('input[name=file]').val(e.target.result);<br /> }<br />}) (f);<br />reader.readAsDataURL(f);<br />
  7. 7. But wait…<br />Not all browsers have standard support for HTML5<br />Not being complete until 2022<br />
  8. 8. Next<br />HTML5 Canvas<br />CSS3<br />
  9. 9. Reference<br />http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/<br />

×