Praktik Pengembangan Konten E-Learning HTML5 Sederhana

38
31 Oktober 2013 Praktik Konten E-Learning HTML5 Sederhana Muhammad Yusuf - [email protected]

description

Praktik sederhana pengembangan konten E-Learning yang menggunakan HTML5 sebagai dasar pengembangannya. Pada akhir pengembangan dilakukan penyesuaian konten untuk memenuhi standar SCORM sehingga hasil akhir kontennya adalah sebuah konten yang mendukung standar SCORM dan siap dikonsumsi oleh LMS. Library yang digunakan adalah CreateJS.

Transcript of Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Page 1: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

31 Oktober 2013

Praktik Konten E-Learning HTML5 SederhanaMuhammad Yusuf - [email protected]

Page 2: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

0101

Silakan unduh library createJShttp://www.createjs.com

Page 3: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

0101

CreateJS

✤ EaselJS

✤ TweenJS

✤ SoundJS

✤ PreloadJS

Page 4: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

0101

Menyalin Library CreateJSSalin isi folder lib dari masing-masing plugin tersebut ke folder proyek Anda yang telah dibuat kemarin (Web Frame).

Page 5: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

0101

Membuat objek di Canvas✤ Circle✤ Text✤ Shadow Property

Page 6: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Membuat canvas (index.html)

<body onload="init()"><table align="center" id="frameContent">

<tr height="120" class="headerTable"><th colspan=“3”>Selamat Datang</th>

</tr><tr height="400" class="bodyTable">

<td colspan="3"><canvas id="kanvas1" width="800" height="400"></canvas>

</td></tr><tr height="80" class="footerTable">

<td width="80%"><a href="index.html"><img src="images/home.png" alt="" style="padding-left: 10px;"></a></td>

<td width="10%"><a href="index.html"><img src="images/prev.png" alt=""></a></td><td width="10%"><a href="index2.html"><img src="images/next.png" alt=""></a></td>

</tr></table>

</body>

Page 7: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Membuat lingkaran di canvas (index.html)<head>

<meta charset="UTF-8"><title>Materi Fisika</title><link rel="stylesheet" href="style.css"/><script src="easeljs-0.7.0.min.js"></script><script>

var stage;

function init(){stage = new createjs.Stage("kanvas1");

var bulat1 = new createjs.Shape();bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);bulat1.x=370;bulat1.y=100;

stage.addChild(bulat1);stage.update();

}</script>

</head>

Page 8: Praktik Pengembangan Konten E-Learning HTML5 Sederhana
Page 9: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Membuat 2 lingkaran lagi di canvas (index.html)function init(){

stage = new createjs.Stage("kanvas1");

var bulat1 = new createjs.Shape();var bulat2 = new createjs.Shape();var bulat3 = new createjs.Shape();

bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);

bulat1.x=370;bulat1.y=100;

Page 10: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Membuat 2 lingkaran lagi di canvas (index.html)

bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);bulat1.x=370;bulat1.y=100;bulat2.graphics.beginFill("#00FF00").drawCircle(0,0,20);bulat2.x=400;bulat2.y=100;bulat3.graphics.beginFill("#0000FF").drawCircle(0,0,20);bulat3.x=430;bulat3.y=100;

stage.addChild(bulat1);stage.addChild(bulat2);stage.addChild(bulat3);stage.update();

Page 11: Praktik Pengembangan Konten E-Learning HTML5 Sederhana
Page 12: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Merubah Z-index di canvas (index.html)

bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);bulat1.x=370;bulat1.y=100;bulat2.graphics.beginFill("#00FF00").drawCircle(0,0,20);bulat2.x=400;bulat2.y=100;bulat3.graphics.beginFill("#0000FF").drawCircle(0,0,20);bulat3.x=430;bulat3.y=100;

stage.addChild(bulat1);stage.addChild(bulat3);stage.addChild(bulat2);stage.update();

Page 13: Praktik Pengembangan Konten E-Learning HTML5 Sederhana
Page 14: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Menambahkan teks di canvas (index.html)

bulat3.x=430;bulat3.y=100;

var text = new createjs.Text("Selamat datang di Pembelajaran Fisika HTML5", "30px Arial", “#000000");

text.x = 100;text.y = 250;

stage.addChild(bulat1);stage.addChild(bulat3);

Page 15: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Menambahkan teks di canvas (index.html)

stage.addChild(text);stage.addChild(bulat1);stage.addChild(bulat3);stage.addChild(bulat2);

Page 16: Praktik Pengembangan Konten E-Learning HTML5 Sederhana
Page 17: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Menambahkan bayangan pada teks di canvas (index.html)

text.x = 100;text.y = 250;text.shadow = new createjs.Shadow("#000000",

5, 5, 10);

Page 18: Praktik Pengembangan Konten E-Learning HTML5 Sederhana
Page 19: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Multimedia HTML5Tween

Audio

Preloader

Event

Ease

Page 20: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Membuat Tween(index.html)

<head><meta charset="UTF-8"><title>Materi Fisika</title><link rel="stylesheet" href="style.css"/><script src="easeljs-0.7.0.min.js"></script><script src=“tweenjs-0.5.0.min.js"></script>

Page 21: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Membuat Tween(index.html)

bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);bulat1.x=0;bulat1.y=100;

bulat2.graphics.beginFill("#00FF00").drawCircle(0,0,20);bulat2.x=400;bulat2.y=100;

bulat3.graphics.beginFill("#0000FF").drawCircle(0,0,20);bulat3.x=430;bulat3.y=100;

createjs.Tween.get(bulat1, {loop:false}).to({x:370}, 1000);createjs.Ticker.addEventListener("tick", onTick);

Page 22: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Membuat Tween(index.html)

stage.addChild(text);stage.addChild(bulat1);stage.addChild(bulat3);stage.addChild(bulat2);//stage.update() di sini dipindahkan ke

onTick()}

function onTick(event){stage.update();

}

Page 23: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Silakan dites.Mari lakukan juga hal yang sama untuk bulat2 dan bulat3

Page 24: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Membuat Tween untuk bulat2 dan bulat3 juga (index.html)

bulat2.graphics.beginFill("#00FF00").drawCircle(0,0,20);bulat2.x=400;bulat2.y=0;

bulat3.graphics.beginFill("#0000FF").drawCircle(0,0,20);bulat3.x=800;bulat3.y=100;

createjs.Tween.get(bulat1, {loop:false}).to({x:370}, 1000);createjs.Tween.get(bulat2, {loop:false}).to({y:100}, 1000);createjs.Tween.get(bulat3, {loop:false}).to({x:430}, 1000);createjs.Ticker.addEventListener("tick", onTick);

Page 25: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Audio + Preloader (index.html)

<script src="easeljs-0.7.0.min.js"></script><script src="tweenjs-0.5.0.min.js"></script><script src="soundjs-0.5.0.min.js"></script><script src="preloadjs-0.4.0.min.js"></script>

Page 26: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Audio + Preloader (index.html)

var stage;var antrianLoad;

function init(){stage = new createjs.Stage("kanvas1");

antrianLoad = new createjs.LoadQueue(false);antrianLoad.installPlugin(createjs.Sound);antrianLoad.addEventListener("complete", handleComplete);antrianLoad.loadManifest([{id:"suara1", src:"computermagic.mp3"}]);

}

function handleComplete(event){var bulat1 = new createjs.Shape();//dan seterusnya…stage.addChild(bulat2);

createjs.Sound.play("suara1");}

Page 27: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Event (index.html)

function onBulatClick(event){createjs.Sound.stop("suara1");createjs.Sound.play("suara1");

}

function onTick(event){stage.update();

}

Page 28: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Event (index.html)

createjs.Tween.get(bulat1, {loop:false}).to({x:370}, 1000);createjs.Tween.get(bulat2, {loop:false}).to({y:100}, 1000);createjs.Tween.get(bulat3, {loop:false}).to({x:430}, 1000);

bulat1.addEventListener("click", onBulatClick);bulat2.addEventListener("click", onBulatClick);bulat3.addEventListener("click", onBulatClick);createjs.Ticker.addEventListener("tick", onTick);

Page 29: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Timeline (index.html)

createjs.Tween.get(bulat1, {loop:false}).to({x:370}, 1000);createjs.Tween.get(bulat2, {loop:false}).wait(2000).to({y:100}, 1000);createjs.Tween.get(bulat3, {loop:false}).to({x:430}, 1000);

Page 30: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Ease (index.html)

createjs.Tween.get(bulat1, {loop:false}).to({x:370}, 1500, createjs.Ease.bounceOut);createjs.Tween.get(bulat2, {loop:false}).wait(2000).to({y:100}, 1000, createjs.Ease.elasticInOut);createjs.Tween.get(bulat3, {loop:false}).to({x:430}, 1500, createjs.Ease.bounceOut);

Page 31: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

SCORMSharable Content Object Relational Model

Page 32: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

0101

Library Pipwerks SCORM

Page 33: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

SCORM (index.html)

<script src="easeljs-0.7.0.min.js"></script><script src="tweenjs-0.5.0.min.js"></script><script src="soundjs-0.5.0.min.js"></script><script src="preloadjs-0.4.0.min.js"></script><script src="SCORM_API_wrapper.js"></script>

Page 34: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

SCORM (index.html)

var stage;var antrianLoad;var scorm = pipwerks.SCORM;

Page 35: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

SCORM (index.html)

function init(){stage = new createjs.Stage("kanvas1");

antrianLoad = new createjs.LoadQueue(false);antrianLoad.installPlugin(createjs.Sound);antrianLoad.addEventListener("complete", handleComplete);antrianLoad.loadManifest([{id:"suara1",

src:"computermagic.mp3"}]);

scorm.version = "1.2";scorm.init();

}

Page 36: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

SCORM (index.html)

function onTick(event){stage.update();

}

function end(){scorm.set("cmi.core.lesson_status", "completed");scorm.quit();

}</script>

Page 37: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

SCORM (imsmanifest.xml)

<?xml version="1.0" encoding="UTF-8"?><manifest xmlns="http://www.imsproject.org/xsd/imscp_rootv1p1p2" xmlns:imsmd="http://www.imsglobal.org/xsd/imsmd_rootv1p2p1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:adlcp="http://www.adlnet.org/xsd/adlcp_rootv1p2" identifier="pipwerksWrapperSCORM12" xsi:schemaLocation="http://www.imsproject.org/xsd/imscp_rootv1p1p2 imscp_rootv1p1p2.xsd http://www.imsglobal.org/xsd/imsmd_rootv1p2p1 imsmd_rootv1p2p1.xsd http://www.adlnet.org/xsd/adlcp_rootv1p2 adlcp_rootv1p2.xsd"> <organizations default="pipwerks"> <organization identifier="pipwerks" structure="hierarchical"> <title>Materi Fisika</title> <item identifier="SCORM12_wrapper_test" isvisible="true" identifierref="pipfiles"> <title>Materi Fisika</title> </item> </organization> </organizations> <resources> <resource identifier="pipfiles" type="webcontent" adlcp:scormtype="sco" href="index.html"> <file href="index.html" /> <file href="SCORM_API_wrapper.js" /> </resource> </resources></manifest>

Page 38: Praktik Pengembangan Konten E-Learning HTML5 Sederhana

Sekian.

[email protected]