The document discusses HTML5, Canvas, SVG, Video, Audio, and Web Storage technologies that can be used to build high quality web and hybrid mobile applications. It provides code examples and demos for drawing shapes, images, and text on Canvas, creating simple SVG graphics, playing video and audio, and using local storage. It also introduces the Titanium framework for building native mobile apps using web technologies.

1. 모바일웹앱HTML5하이브리드앱
HTML5고품질웹앱개발전략

2. 김민태
@ibare
www.ibare.kr
ibare77@gmail.com
Imageclick co., Ltd.

3. Worker
Microdata
Video ARIA CSS3
Drag Drop Javascript
Audio
SVG Canvas
New Form WebSocket Geolocation
Web Storage Semantic
MathML WebGL Offline Application
Files
Device Element

4. CANVAS
Drawing shapes
Filling colours
Creating gradients patterns
Rendering text
Copying images, video frames, and more
Manipulating pixels
Exporting the contents of a canvas
to a static file

5. Demo - Game
http://agent8ball.com/

7. Canvas UI
Google ebook

9. A skeleton template
html
head
titleCanvas tutorial/title
script type=text/javascript
function draw(){
var canvas = document.getElementById('canvas1');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code
}
}
/script
style type=text/css
#canvas1 { border: 1px solid black; }
/style
/head
body onload=draw();
canvas id=canvas1 width=150 height=150/canvas
/body
/html

10. Drawing shape
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);

11. Line
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.lineTo(25,105);
ctx.fill();
ctx.beginPath();
ctx.moveTo(125,125);
ctx.lineTo(125,45);
ctx.lineTo(45,125);
ctx.closePath();
ctx.stroke();

12. Using image
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
img.src = 'images/backdrop.png';
}

13. Scalable Vector Graphics - SVG
2001 W3C recommendation
XML based Markup Language
Scalable 2D Graphics
CSS, line, shape, group, text and more
Animation
Access SVG DOM
Event handling in SVG Applications
SVG in text/html

14. Dots vs Vector
http://en.wikipedia.org/wiki/File:Bitmap_VS_SVG.svg

15. Demo
gandhi-quotes
http://svg-wow.org/gandhi-quotes/gandhi-quotes.xhtml

17. Demo
Flickr - Lightbox
http://svg-wow.org/photoAlbum/light-table.svg

19. Hello World! #1
body
svg width=400 height=300
text x=100 y=100Hello World!/text
/svg
/body

20. Hello World! #2
body
svg width=400 height=300
text x=100 y=100
font-size=”50px”
fill=”rgba(0,0,255,1)”
stroke=”red”Hello World!/text
/svg
/body

22. VIDEO
Native video tag
Video API
H.264, WebM, Ogg
CSS Styling

23. Video - the old way
object classid=clsid:... width=425 height=344
codebase=http://www/pub/shockwave/cabs/flash/swflash.cab
param name=allowFullScreen value=true /
param name=allowscriptaccess value=always /
param name=src value=http://www.youtube.com/ /
param name=allowfullscreen value=true /
embed type=application/x-shockwave-flash
width=425 height=344 src=http://www.youtube.com
allowscriptaccess=always allowfullscreen=true
/embed
/object

24. Video - the HTML5 way
video width=640 height=360 src=http://www.youtube.com
controls autobuffer
p Try this page in Safari 4! Or you can
a href=http://www.youtube.com
download the video
/a
instead.
/p
/video

25. Video - API
var v1 = getElementById(“video1”);
v1.play();
v1.pause();
v1.muted = true;
v1.volume = 0.5;
v.addEventListener('play', function() {
drawImage(this, context, ...);
}, false);

26. Video - manipulating video pixels

27. 27

28. AUDIO - visualizer
http://www.storiesinflight.com/jsfft/visualizer/index.html

29. 29

30. Web Storage
SessionStorage LocalStorage

31. Web SQL Database
var db = window.openDatabase(
DBName, 1.0, description, 5*1024*1024);
db.transaction(function(tx) {
tx.executeSql(SELECT * FROM test, [],
successCallback, errorCallback);
});

32. IndexedDB
var idbRequest = window.indexedDB.open('Database Name');
idbRequest.onsuccess = function(event) {
var db = event.result;
var transaction = db.transaction([], IDBTransaction.READ_ONLY);
var curRequest =
transaction.objectStore('ObjectStore Name').openCursor();
curRequest.onsuccess = function () { ... };
};

33. Application cache
CACHE MANIFEST !doctype html
html manifest=cache.manifest
CACHE:
index.html ...
stylesheet.css
images/masthead.png
scripts/misc.js
NETWORK:
search.php
login.php
/api
FALLBACK:
images/dynamic.php static_image.png

34. Titanium
Titanium apps are Native.
Build native apps with web technology.

35. Titanium - Platform
Desktop
- Win32, Mac OSX (intel), Linux
Mobile
- iPhone, Android, iPad, Blackberry

36. 36

37. Titanium - Features
네이티브사용자경험 위치기반서비스
SNS공유 멀티미디어
분석툴 네이티브모듈확장
37

38. Titanium - Desktop vs. Mobile
Desktop Mobile
38

39. Titanium - Mobile Code
var win1 = Titanium.UI.createWindow({
title:'View1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'icon.png',
title:'View2',
window:win1
});
var label1 = Titanium.UI.createLabel({
color:'#999',
text:'Hellow',
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win1.add(label1);

40. Titanium - Build Test