Praktik Konten E-Learning HTML5 Sederhana
Muhammad Yusuf - muhammad.yusuf@comlabs.itb.ac.id
31 Oktober 2013
Silakan unduh
library createJS
http://www.createjs.com

01
CreateJS

✤

EaselJS

✤

TweenJS

✤

SoundJS

✤

PreloadJS

01
Menyalin
Library
CreateJS
Salin isi folder lib dari masing-masing
plugin tersebut ke folder proyek Anda
yang telah dibuat ...
Membuat objek
di Canvas
✤

Circle

✤

Text

✤

Shadow Property

01
Membuat canvas (index.html)
<body onload="init()">
<table align="center" id="frameContent">
<tr height="120" class="header...
Membuat lingkaran di canvas
(index.html)
<head>
<meta charset="UTF-8">
<title>Materi Fisika</title>
<link rel="stylesheet"...
Membuat 2 lingkaran lagi di canvas
(index.html)
function init(){
stage = new createjs.Stage("kanvas1");
var bulat1 = new c...
Membuat 2 lingkaran lagi di canvas
(index.html)
bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);
bulat1.x=370;
bul...
Merubah Z-index di canvas
(index.html)
bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);
bulat1.x=370;
bulat1.y=100...
Menambahkan teks di canvas
(index.html)
bulat3.x=430;
bulat3.y=100;
var text = new createjs.Text("Selamat
datang di Pembel...
Menambahkan teks di canvas
(index.html)

stage.addChild(text);
stage.addChild(bulat1);
stage.addChild(bulat3);
stage.addCh...
Menambahkan bayangan pada
teks di canvas (index.html)

text.x = 100;
text.y = 250;
text.shadow = new createjs.Shadow("#000...
Multimedia HTML5
Tween
Audio
Preloader
Event
Ease
Membuat Tween(index.html)

<head>
<meta charset="UTF-8">
<title>Materi Fisika</title>
<link rel="stylesheet" href="style.c...
Membuat Tween(index.html)
bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);
bulat1.x=0;
bulat1.y=100;
bulat2.graphi...
Membuat Tween(index.html)
stage.addChild(text);
stage.addChild(bulat1);
stage.addChild(bulat3);
stage.addChild(bulat2);
//...
Silakan dites.
Mari lakukan juga hal yang sama untuk bulat2 dan bulat3
Membuat Tween untuk bulat2 dan
bulat3 juga (index.html)
bulat2.graphics.beginFill("#00FF00").drawCircle(0,0,20);
bulat2.x=...
Audio + Preloader (index.html)

<script
<script
<script
<script

src="easeljs-0.7.0.min.js"></script>
src="tweenjs-0.5.0.m...
Audio + Preloader (index.html)
var stage;
var antrianLoad;
function init(){
stage = new createjs.Stage("kanvas1");
antrian...
Event (index.html)

function onBulatClick(event){
createjs.Sound.stop("suara1");
createjs.Sound.play("suara1");
}
function...
Event (index.html)
createjs.Tween.get(bulat1, {loop:false}).to({x:370},
1000);
createjs.Tween.get(bulat2, {loop:false}).to...
Timeline (index.html)

createjs.Tween.get(bulat1, {loop:false}).to({x:370},
1000);
createjs.Tween.get(bulat2,
{loop:false}...
Ease (index.html)

createjs.Tween.get(bulat1, {loop:false}).to({x:370}, 1500,
createjs.Ease.bounceOut);
createjs.Tween.get...
SCORM
Sharable Content Object Relational Model
Library
Pipwerks
SCORM

01
SCORM (index.html)

<script
<script
<script
<script
<script

src="easeljs-0.7.0.min.js"></script>
src="tweenjs-0.5.0.min.j...
SCORM (index.html)

var stage;
var antrianLoad;
var scorm = pipwerks.SCORM;
SCORM (index.html)
function init(){
stage = new createjs.Stage("kanvas1");
antrianLoad = new createjs.LoadQueue(false);
an...
SCORM (index.html)

function onTick(event){
stage.update();
}
function end(){
scorm.set("cmi.core.lesson_status", "complet...
SCORM (imsmanifest.xml)
<?xml version="1.0" encoding="UTF-8"?>
<manifest xmlns="http://www.imsproject.org/xsd/imscp_rootv1...
Sekian.

muhammad.yusuf@live.com
Praktik Pengembangan Konten E-Learning HTML5 Sederhana
Praktik Pengembangan Konten E-Learning HTML5 Sederhana
Praktik Pengembangan Konten E-Learning HTML5 Sederhana
Praktik Pengembangan Konten E-Learning HTML5 Sederhana
Praktik Pengembangan Konten E-Learning HTML5 Sederhana
Upcoming SlideShare
Loading in...5
×

Praktik Pengembangan Konten E-Learning HTML5 Sederhana

992

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
992
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
70
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Praktik Pengembangan Konten E-Learning HTML5 Sederhana

  1. 1. Praktik Konten E-Learning HTML5 Sederhana Muhammad Yusuf - muhammad.yusuf@comlabs.itb.ac.id 31 Oktober 2013
  2. 2. Silakan unduh library createJS http://www.createjs.com 01
  3. 3. CreateJS ✤ EaselJS ✤ TweenJS ✤ SoundJS ✤ PreloadJS 01
  4. 4. Menyalin Library CreateJS Salin isi folder lib dari masing-masing plugin tersebut ke folder proyek Anda yang telah dibuat kemarin (Web Frame). 01
  5. 5. Membuat objek di Canvas ✤ Circle ✤ Text ✤ Shadow Property 01
  6. 6. 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>
  7. 7. 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>
  8. 8. 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;
  9. 9. 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();
  10. 10. 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();
  11. 11. 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);
  12. 12. Menambahkan teks di canvas (index.html) stage.addChild(text); stage.addChild(bulat1); stage.addChild(bulat3); stage.addChild(bulat2);
  13. 13. Menambahkan bayangan pada teks di canvas (index.html) text.x = 100; text.y = 250; text.shadow = new createjs.Shadow("#000000", 5, 5, 10);
  14. 14. Multimedia HTML5 Tween Audio Preloader Event Ease
  15. 15. 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>
  16. 16. 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);
  17. 17. 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(); }
  18. 18. Silakan dites. Mari lakukan juga hal yang sama untuk bulat2 dan bulat3
  19. 19. 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);
  20. 20. Audio + Preloader (index.html) <script <script <script <script src="easeljs-0.7.0.min.js"></script> src="tweenjs-0.5.0.min.js"></script> src="soundjs-0.5.0.min.js"></script> src="preloadjs-0.4.0.min.js"></script>
  21. 21. 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"); }
  22. 22. Event (index.html) function onBulatClick(event){ createjs.Sound.stop("suara1"); createjs.Sound.play("suara1"); } function onTick(event){ stage.update(); }
  23. 23. 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);
  24. 24. 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);
  25. 25. 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);
  26. 26. SCORM Sharable Content Object Relational Model
  27. 27. Library Pipwerks SCORM 01
  28. 28. SCORM (index.html) <script <script <script <script <script src="easeljs-0.7.0.min.js"></script> src="tweenjs-0.5.0.min.js"></script> src="soundjs-0.5.0.min.js"></script> src="preloadjs-0.4.0.min.js"></script> src="SCORM_API_wrapper.js"></script>
  29. 29. SCORM (index.html) var stage; var antrianLoad; var scorm = pipwerks.SCORM;
  30. 30. 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(); }
  31. 31. SCORM (index.html) function onTick(event){ stage.update(); } function end(){ scorm.set("cmi.core.lesson_status", "completed"); scorm.quit(); } </script>
  32. 32. 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>
  33. 33. Sekian. muhammad.yusuf@live.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×