PEMBELAJARAN KOLABORATIF. Penyusun Tugas Akhir : Hapsoro Adi
Permana– 5108100011. Dosen Pembimbing : Umi Laili Yuhana, S.Kom., M.Sc.
EKSPLORASI HTML5 DENGAN STUDI KASUS JEJARING SOSIAL UNTUK PEMBELAJARAN KOLABORATIF Penyusun Tugas Akhir : Hapsoro Adi Permana– 5108100011 Dosen Pembimbing : Umi Laili Yuhana, S.Kom., M.Sc. Daniel Oranova Siahaan, S.Kom., M.Sc., P.D.Eng.
GARIS BESAR • • • •
Pendahuluan Analisis dan Desain Implementasi Sistem Penutup
PENDAHULUAN Latar Belakang Rumusan Masalah Kajian Pustaka
LATAR BELAKANG • Munculnya standar HTML (1990an) • Javascript • Konsep HTML5 (2008)
RUMUSAN MASALAH • Bagaimana membangun aplikasi berbasis web yang mengimplementasikan HTML5. • Bagaimana menggunakan HTML5 Canvas sebagai penampil gambar.
KAJIAN PUSTAKA • HTML5 – Drag and Drop – Web Storage (Penyimpanan web) – Web SQL – Kanvas HTML5 – Geolocation
• Pembelajaran Kolaboratif
KAJIAN PUSTAKA – HTML5 • Drag and Drop – Sebuah elemen pada halaman web dapat menerima event pada awal serta akhir proses drag.
• Web Storage (Penyimpanan web) – Penyimpanan data pada memori sekunder tanpa menggunakan cookies. • Session Storage • Local Storage
KAJIAN PUSTAKA – HTML5 • Web SQL – Pada HTML5 diperkenalkan fitur basisdata yang berada pada sisi client. Basisdata ini diatur oleh perambah web yang digunakan oleh pengguna. – SQL yang dipakai menyerupai SQL yang dipakai pada berbagai basisdata lain pada umumnya.
KAJIAN PUSTAKA – HTML5 • Kanvas HTML5 – Kanvas HTML5 merupakan area bitmap yang dapat dimanipulasi dengan menggunakan JavaScript.
• Geolocation – API Javascript untuk mendeteksi lokasi pengguna.
KAJIAN PUSTAKA – PEMBELAJARAN KOLABORATIF • Pembelajaran Kolaboratif – Metode pembelajaran yang dapat memudahkan peserta belajar dalam bekerja sama, saling membina, belajar dan berubah bersama. – Pemahaman berbeda-beda terhadap sebuah permasalahan gagasan baru akan sebuah permasalahan.
KAJIAN PUSTAKA – PEMBELAJARAN KOLABORATIF • Pembelajaran Kolaboratif – Contoh aplikasi untuk pembelajaran kolaboratif: • Dreamshare – aplikasi desktop pembelajaran kolaboratif learning yang menggunakan peta pikiran sebagai media pembelajarannya
ANALISIS DAN DESAIN Arsitektur Spesifikasi Kebutuhan Skenario Kasus Penggunaan Antarmuka Pengguna
ANALISIS DAN DESAIN - ANALISIS • Arsitektur
ANALISIS DAN DESAIN - ANALISIS • Spesifikasi Kebutuhan – Menambahkan teman – Berdiskusi – Berbagi hasil diskusi
ANALISIS DAN DESAIN - ANALISIS • Skenario Kasus Penggunaan
ANALISIS DAN DESAIN - DESAIN • Antarmuka Pengguna – Halaman log in – Halaman Utama – Badge Diskusi
IMPLEMENTASI SISTEM Implementasi Kasus Penggunaan Implementasi HTML5
KASUS PENGGUNAAN • Tambah Teman
KASUS PENGGUNAAN • Publikasi Diskusi
KASUS PENGGUNAAN • Berdiskusi
KASUS PENGGUNAAN • Ajak Diskusi
KASUS PENGGUNAAN • Sunting Profil
HTML5 • Drag and Drop – Drag foto pengguna untuk menambahkan sebagai teman
HTML5 • Kanvas – halaman-halaman penciptaan diskusi, halaman berdiskusi, serta halaman pengunggah foto profil
HTML5 • Desktop Notification – fitur notifikasi ajakan diskusi
HTML5 • Geolocation – halaman profil pengguna • memperbarui lokasi pengguna
– halaman utama • fitur pencarian pengguna lain yang berada dekat dengan lokasi pengguna sekarang
HTML5 • Local Storage – menyimpan tautan ke diskusi yang diinginkan pengguna
HTML5 • Web SQL – Pada halaman penciptaan diskusi, pengguna dapat menyimpan draf dari diskusi pada sisi client
UJI COBA DAN EVALUASI Uji Coba Kasus Penggunaan Evaluasi
UJI COBA • Tambahkan Teman
UJI COBA • Publikasi Diskusi
UJI COBA • Mengobrol Dalam Diskusi
UJI COBA • Ajak Diskusi
UJI COBA • Sunting Profil
PENUTUP Kesimpulan Saran
KESIMPULAN • Fitur-fitur HTML5 dapat diimplementasikan dengan menggunakan kode-kode Javascript pada sisi client. • Local storage dapat digunakan untuk menyimpan objek dalam bentuk string (atau JSON string).
KESIMPULAN • Canvas dapat digunakan untuk memanipulasi gambar. • Geolocation dapat mendeteksi lokasi pengguna, namun tidak dapat berjalan tanpa persetujuan pengguna. • Drag-and-drop dapat dilakukan dengan baik pada perambah web Google Chrome.
SARAN • Diskusi dapat dilengkapi dengan fitur menggambar sehingga gambar diskusi tidak terbatas pada berkas citra yang sudah ada. • Mengaplikasikan web socket pada penggambaran kanvas.
DAFTAR PUSTAKA
DAFTAR PUSTAKA • Koch, Peter-Paul. Event Order. Quirksmode. [Online] 17 September 2006. [Dikutip: 14 January 2012.] http://www.quirksmode.org/js/events_order.html. • Förster, Klaus dan Öggl, Bernd. HTML5 Guidelines for Web Developers. CrawfordsVille : Pearson, 2011. • Fulton, Steve dan Fulton, Jeff. HTML5 Canvas. Sebastopol : O'Reilly, 2011. • Discussion Tool Effects on Collaborative Learning and Social Network. Tomsic, Astrid dan Suthers, Daniel D. 2006, Educational Technology & Society, 9, hal. 63-77.
DAFTAR PUSTAKA • Creating Effective Collaborative Learning Groups in an Online Environment. Blindley, Jane E., Walti, Christine dan Blaschke, Lisa M. 2009, The International Rev iew of Research in Open and Distance Learning, Vol 1 0, No 3. • Mandala, Yohanda. Rancang Bangun Aplikasi Dreamshare - Pembuat Mind Map Berbasis Collaborative Learning. Surabaya : s.n., 2012. • Eichorn, Joshua. Understanding Ajax: Using JavaScript to Create Rich Internet Applications. Crawfordsville : Prentice Hall, 2006.
DAFTAR PUSTAKA • T. Holdener, Anthony. Ajax: The Definitive Guide. Sebastopol : O'Reilly, 2008. • Freeman, Adam dan Sanderson, Steven. Pro ASP .NET MVC 3 Framework. New York : Apress, 2011. • Cibraro, Pablo, et al., et al. Professional WCF 4 Windows Communication Foundation with .NET 4. Indianapolis : Wiley, 2010.
EKSPLORASI HTML5 DENGAN STUDI KASUS JEJARING SOSIAL UNTUK PEMBELAJARAN KOLABORATIF Penyusun Tugas Akhir : Hapsoro Adi Permana– 5108100011 Dosen Pembimbing : Umi Laili Yuhana, S.Kom., M.Sc. Daniel Oranova Siahaan, S.Kom., M.Sc., P.D.Eng.
