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.

1. HTML5

2. Features New HTML elements Video and Audio support Local storage ◄ Local file access ◄

3. Content Editable Edit html within element with contenteditable attribute <div> <b>to do list!</b> </div> <ul id="edit" contenteditable="true"> <li>Chandra</li> <li>chandra_oey@yahoo.com</li> </ul>

4. Local File Storage Save data and retrieve on user’s browser, no need to access web server Save data localStorage.setItem('todo', edit.html()); Retrieve data edit.html(localStorage.getItem('todo'));

5. Local File Access Read file in users filesystem You can use local file access to preview image in HTML without upload to server first

6. Local File Access var reader = new FileReader(); reader.onload = (function(theFile){ return function(e){ var span = document.createElement('span'); var input = $('<input type="hidden" name="file[]" />'); span.innerHTML = ['<imgsrc="', e.target.result, '" title="'+theFile.name+'" />'].join(''); input.val(e.target.result); $('#list').append(span); albumForm.append(input); //$('input[name=file]').val(e.target.result); } }) (f); reader.readAsDataURL(f);

7. But wait… Not all browsers have standard support for HTML5 Not being complete until 2022

8. Next HTML5 Canvas CSS3

9. Reference http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/