praktik pengembangan konten e-learning html5 sederhana
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
![Page 3: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/3.jpg)
0101
CreateJS
✤ EaselJS
✤ TweenJS
✤ SoundJS
✤ PreloadJS
![Page 4: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/4.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/5.jpg)
0101
Membuat objek di Canvas✤ Circle✤ Text✤ Shadow Property
![Page 6: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/6.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/7.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/8.jpg)
![Page 9: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/9.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/10.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/11.jpg)
![Page 12: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/12.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/13.jpg)
![Page 14: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/14.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/15.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/16.jpg)
![Page 17: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/17.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/18.jpg)
![Page 19: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/19.jpg)
Multimedia HTML5Tween
Audio
Preloader
Event
Ease
![Page 20: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/20.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/21.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/22.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/23.jpg)
Silakan dites.Mari lakukan juga hal yang sama untuk bulat2 dan bulat3
![Page 24: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/24.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/25.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/26.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/27.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/28.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/29.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/30.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/31.jpg)
SCORMSharable Content Object Relational Model
![Page 32: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/32.jpg)
0101
Library Pipwerks SCORM
![Page 33: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/33.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/34.jpg)
SCORM (index.html)
var stage;var antrianLoad;var scorm = pipwerks.SCORM;
![Page 35: Praktik Pengembangan Konten E-Learning HTML5 Sederhana](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/35.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/36.jpg)
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](https://reader031.vdocuments.pub/reader031/viewer/2022020207/55947b5e1a28ab33558b476f/html5/thumbnails/37.jpg)
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>