Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


HTML 5 Embedded DB Tutorial

HTML 5 Embedded DB Tutorial

charlie cai

on 11 May 2010

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML 5 Embedded DB Tutorial

HTML5 has lots of cool features Drag and Drop Video and Audio elements Off-line DB Storage Before we setting the element's position by configuring CSS attributes
we also use Javascript Lib(e.g. YUI) to implement the Drag & Drop <html>
<div id='drag' draggable='true'>drag me</div>
<div id='drop' style='
height: 300px;
border: solid 1px #0000ff'>

<script type="text/javascript">
var dragEl = document.getElementById('drag');
dragEl.addEventListener('dragstart', function (e) {e.dataTransfer.setData("arbitrary","draggable"); return true;}, true);
var dropEl = document.getElementById('drop');
dropEl.addEventListener('dragover', function (e) {e.preventDefault();}, true);
dropEl.addEventListener('dragenter', function(e) {e.preventDefault();}, true);
dropEl.addEventListener('drop', function (e) {e.stopPropagation(); this.innerHTML = '<p>' + 'Drag' + '</p>'; }, true);
</html> But now Drag and Drop is part of HTML5 standard Not all the browser are supported now we use Chrome 5.0 to show in this presentation It is said that HTML5 will replace the existing RIA technology.
e.g. Flash and Silverlight;
Of course, there's still long way to go.
But this presentation is created by a representation editor, which is using Flash technology. Thank you! file:///D:/prj/HTML5/dragMe.html Before HTML5 we use flash to play video;
it requires flash player browser plugin from Adobe.

Now if the browser is alligned with HTML5 to support video element,
The browser can play the video directly. Check the demo: http://html5demos.com/video And the code look like this:
<!DOCTYPE html>
<html lang="en">
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>HTML5 Demo: Video</title>
<link rel="stylesheet" href="/css/html5demos.css" type="text/css" />
<script src="/js/h5utils.js"></script></head>
<section id="wrapper">
<source src="assets/dizzy.mp4" />
<source src="assets/dizzy.ogv" />
</video> Need more detail regarding the code, check the Refernce link:
Get an impression of how it works
http://webkit.org/demos/sticky-notes/index.html LiveDemo DB Code:
db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000);

tx.executeSql("UPDATE WebKitStickyNotes SET note = ?, timestamp = ?, left = ?, top = ?, zindex = ? WHERE id = ?", [note.text, note.timestamp, note.left, note.top, note.zIndex, note.id]); Silver light will ask for more application cache
Flash will ask for local storage setting
Full transcript