EKSPLORASI HTML5 DENGAN STUDI KASUS JEJARING SOSIAL UNTUK PEMBELAJARAN KOLABORATIF Penyusun Tugas Akhir : Hapsoro Adi Permana

Transkripsi

1 EKSPLORASI HTML5 DENGAN STUDI KASUS JEJARING SOSIAL UNTUK PEMBELAJARAN KOLABORATIF Penyusun Tugas Akhir : Hapsoro Adi Permana Dosen Pembimbing : Umi Laili Yuhana, S.Kom., M.Sc. Daniel Oranova Siahaan, S.Kom., M.Sc., P.D.Eng.

2 GARIS BESAR Pendahuluan Analisis dan Desain Implementasi Sistem Penutup

3 PENDAHULUAN Latar Belakang Rumusan Masalah Kajian Pustaka

4 LATAR BELAKANG Munculnya standar HTML (1990an) Javascript Konsep HTML5 (2008)

5 RUMUSAN MASALAH Bagaimana membangun aplikasi berbasis web yang mengimplementasikan HTML5. Bagaimana menggunakan HTML5 Canvas sebagai penampil gambar.

6 KAJIAN PUSTAKA HTML5 Drag and Drop Web Storage (Penyimpanan web) Web SQL Kanvas HTML5 Geolocation Pembelajaran Kolaboratif

7 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

8 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.

9 KAJIAN PUSTAKA HTML5 Kanvas HTML5 Kanvas HTML5 merupakan area bitmap yang dapat dimanipulasi dengan menggunakan JavaScript. Geolocation API Javascript untuk mendeteksi lokasi pengguna.

10 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.

11 KAJIAN PUSTAKA PEMBELAJARAN KOLABORATIF Pembelajaran Kolaboratif Contoh aplikasi untuk pembelajaran kolaboratif: Dreamshare aplikasi desktop pembelajaran kolaboratif learning yang menggunakan peta pikiran sebagai media pembelajarannya

12 ANALISIS DAN DESAIN Arsitektur Spesifikasi Kebutuhan Skenario Kasus Penggunaan Antarmuka Pengguna

13 ANALISIS DAN DESAIN - ANALISIS Arsitektur

14 ANALISIS DAN DESAIN - ANALISIS Spesifikasi Kebutuhan Menambahkan teman Berdiskusi Berbagi hasil diskusi

15 ANALISIS DAN DESAIN - ANALISIS Skenario Kasus Penggunaan

16 ANALISIS DAN DESAIN - DESAIN Antarmuka Pengguna Halaman log in Halaman Utama Badge Diskusi

17 IMPLEMENTASI SISTEM Implementasi Kasus Penggunaan Implementasi HTML5

18 Tambah Teman KASUS PENGGUNAAN

19 KASUS PENGGUNAAN Publikasi Diskusi

20 Berdiskusi KASUS PENGGUNAAN

21 Ajak Diskusi KASUS PENGGUNAAN

22 Sunting Profil KASUS PENGGUNAAN

23 HTML5 Drag and Drop Drag foto pengguna untuk menambahkan sebagai teman

24 HTML5 Kanvas halaman-halaman penciptaan diskusi, halaman berdiskusi, serta halaman pengunggah foto profil

25 HTML5 Desktop Notification fitur notifikasi ajakan diskusi

26 HTML5 Geolocation halaman profil pengguna memperbarui lokasi pengguna halaman utama fitur pencarian pengguna lain yang berada dekat dengan lokasi pengguna sekarang

27 HTML5 Local Storage menyimpan tautan ke diskusi yang diinginkan pengguna

28 HTML5 Web SQL Pada halaman penciptaan diskusi, pengguna dapat menyimpan draf dari diskusi pada sisi client

29 UJI COBA DAN EVALUASI Uji Coba Kasus Penggunaan Evaluasi

30 Tambahkan Teman UJI COBA

31 Publikasi Diskusi UJI COBA

32 UJI COBA Mengobrol Dalam Diskusi

33 Ajak Diskusi UJI COBA

34 Sunting Profil UJI COBA

35 PENUTUP Kesimpulan Saran

36 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).

37 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.

38 SARAN Diskusi dapat dilengkapi dengan fitur menggambar sehingga gambar diskusi tidak terbatas pada berkas citra yang sudah ada. Mengaplikasikan web socket pada penggambaran kanvas.

39 DAFTAR PUSTAKA

40 DAFTAR PUSTAKA Koch, Peter-Paul. Event Order. Quirksmode. [Online] 17 September [Dikutip: 14 January 2012.] Förster, Klaus dan Öggl, Bernd. HTML5 Guidelines for Web Developers. CrawfordsVille : Pearson, Fulton, Steve dan Fulton, Jeff. HTML5 Canvas. Sebastopol : O'Reilly, Discussion Tool Effects on Collaborative Learning and Social Network. Tomsic, Astrid dan Suthers, Daniel D. 2006, Educational Technology & Society, 9, hal

41 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., Eichorn, Joshua. Understanding Ajax: Using JavaScript to Create Rich Internet Applications. Crawfordsville : Prentice Hall, 2006.

42 DAFTAR PUSTAKA T. Holdener, Anthony. Ajax: The Definitive Guide. Sebastopol : O'Reilly, Freeman, Adam dan Sanderson, Steven. Pro ASP.NET MVC 3 Framework. New York : Apress, Cibraro, Pablo, et al., et al. Professional WCF 4 Windows Communication Foundation with.net 4. Indianapolis : Wiley, 2010.

43 EKSPLORASI HTML5 DENGAN STUDI KASUS JEJARING SOSIAL UNTUK PEMBELAJARAN KOLABORATIF Penyusun Tugas Akhir : Hapsoro Adi Permana Dosen Pembimbing : Umi Laili Yuhana, S.Kom., M.Sc. Daniel Oranova Siahaan, S.Kom., M.Sc., P.D.Eng.