HTML5가 가져올 웹트렌드 미리보기

“The Future of the Web is HTML5,”

별도의 브라우저 플러그인을 설치하지 않고
네이티브 애플리케이션 수준의
리치한 웹 애플리케이션을 개발한다.

HTML5 :

HTML + CSS + Javascript API

Javascript API

  • Desktop Experience
  • Client Side Storage
  • Realtime Interaction

Desktop Experience

  • Notifications
  • Drag and drop
  • Web Workers
  • HTMLElement APIs
    • Video & Audio
    • SVG
    • Canvas 2D & 3D(WebGL)

Notifications

if (window.webkitNotifications.checkPermission() == 0) {
  // you can pass any url as a parameter
  window.webkitNotifications.createNotification(tweet.picture, tweet.title, 
    tweet.text).show(); 
} else {
  window.webkitNotifications.requestPermission();
}

Note: Use this button if you also want to reset the permissions


Enter your twitter user name to show your last tweet as a notification

Drag and drop

document.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text', 'Customized text');
  event.dataTransfer.effectAllowed = 'copy';
}, false);
  2. Select text and drag (original text will be dropped)
  3. Select text and drag (dragged text data will be altered from original)
Source Data
Drop Area

Coming soon: drag files from your desktop

Web Workers

main.js:
var worker = new Worker(‘extra_work.js');
worker.onmessage = function (event) { alert(event.data); }; 

extra_work.js:
// do some work; when done post message.
postMessage(some_data);

Try to drag the map while calculating the complex route (you will only be allowed to do that if you use workers)

Audio and Video

<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted=false;

<video src='movie.mp4' autoplay controls ></video>
document.getElementById("video").play();

SVG in HTML5

<html>
<svg>
  <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" 
    fill="url(#myGradient)"
    onmousedown="alert('hello');"/>
</svg> 
</html>

SVG example

Canvas

<canvas id="canvas" width="838" height="220"></canvas>

<script>
var canvasContext = document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);

canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
</script>

Canvas example

Canvas 3D (WebGL)

<canvas id="canvas" width="838" height="220"></canvas>

<script>
var gl = document.getElementById("canvas").getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
...
</script>

Client Side Storage

  • Web Storage
  • Web SQL Database
  • Application Cache API

Web Storage

 
// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
  window.localStorage['value'] = area.value;
  window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];

Use case: Save email draft on the client side (crash-safe)

Web SQL Database

var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

    See the generated database: Developer > Developer Tools > Storage

    Application Cache API

    <html manifest="cache-manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);

    CACHE MANIFEST

# version 1

CACHE:
/html5/src/refresh.png
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

    Turn off your internet connection and refresh!

    Realtime Interaction

    • Web Sockets
    • Geolocation

    Web Sockets

    var socket = new WebSocket(location);
socket.onopen = function(event) {
  socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert(“closed”); }

    It allows a web server to push data to a browser (COMET)

    Geolocation

    if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
  var lat = position.coords.latitude;
  var lng = position.coords.longitude;
  map.setCenter(new GLatLng(lat, lng), 13);
  map.addOverlay(new GMarker(new GLatLng(lat, lng)));    
});
}

    Javascript API

    • Desktop Experience
    • Client Side Storage
    • Realtime Interaction

    When can I use HTML5?

    quake2-gwt-port

    감사합니다.