Cara Mengonlinekan Multimedia Pembelajaran Interaktif (MPI) HTML5

Daftar Isi

 Assalamualaikum Wr. Wb. 

Salam sehat dan bahagian Bapak/Ibu Guru, sahabat GTK semua.

Pada postingan kali ini saya ingin berbagi tutorial bagaimana cara untuk mengonlinekan Multimedia Pembelajaran Interaktif (MPI) berbasis web html5.

Cara Mengonlinekan Multimedia Pembelajan Interaktif (MPI) html 5

Tulisan ini saya buat untuk menjawab pertanyaan yang masuk ke WA saya dari teman-teman yang ingin bisa mengonlinekan sendiri MPI. Karena tidak bisa jawab satu perpsatu, semoga postingan ini bisa membantu.

Kemendikbudristek mengadakan sebuah program rutin setiap tahun yaitu Pembelajaran Berbasis TIK (Pembatik). PembaTIK Level 3 Mampu Membuat Multimedia Pembelajaran Interaktif (MPI).

A. HTML5

Apa itu html5? Saya kutipkan dari Wikipedia saja ya :)

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium World Wide Web (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikansecara berbeda-beda oleh banyak perangkat lunak pembuat web.

Nah itu sedikit untuk nenambah wawasan teknis tentang html5 sehingga akan lebih paham cara mengonlinekanya.

B. Publish MPI Ke format HTML5

Sebelum Bapak/Ibu Guru mengonlinekan MPI, terlebih dahulu tentu harus punya file MPInya dalam format html5. Aplikasi yang biasa digunakan  untuk membuat MPI html5 dan diajarkan pada modul PembaTIK adalah Articulate Storyline dan Smart Apps Creator (SAC)

Cara Publish Articulate Storyline ke Web Html5

1. Pastika konten MPI sudah jadi dan di priview sudah ok.

2. Kemudian pilih menu "Home" --- "Publish"

3. Jangan lupa pilih yang "Web" , masukan judul dan isi deskripsi biar lebih bagus dan mudah dicari nantinya.

4. Setelah berhasil Bapak/Ibu Guru bisa langsung membukanya.

5. Namun disini kita pilih dulu yang .ZIP agar mudah saat proses upload ke server/hosting.

5. File format ZIP inilah yang akan diupload ke server/hosting.

 

C. Cara Mengonlinekan MPI HTML5

Untuk mengonlinekan MPI HTML5 kita memerlukan server hosting. Ada berbagai macam layanan server hosting dari berbayar dan ada juga yang gratis.

Mengonlinekan MPI Menggunakan Hosting Gratis

Jika Bapak/Ibu Guru lagi mencari server hosting gratis yang bisa digunakan untuk mengonlinekan MPI yang juga sudah saya coba bisa yaitu sebagai berikut:

• 1. https://www.drv.tw/
• 2. https://github.com/
• 3. https://000webhost.com/   ( Cara Upload Web MPI HTML5 di Hosting Gratis www.000webhost.com )

Mengonlinekan MPI Menggunakan Hosting Berbayar

Pada tutorial kali ini saya tunjukan mengonlinekan MPI menggunakan hosting berbayar. Hosting yang saya gunakan adalah Doublehost yang mana harganya cukup murah dan terjangkau bagi saya seorang operator. Saat tulisan ini ditulis sedang ada promo hosting 1 tahun berkapasitas penyimpanan 1 GB hanya Rp. 49.000,-

Kalau hitungan kasarnya jika rata-rata MPI 100 MB kita bisa upload file MPI sampaai 10.

Adapun langkah-lankahnya akan saya akan tunjukan langkahnya satu persatu.

1. Silahkan login ke dasboard Dobelhost https://member.dobelhost.com/

2. Kemudian cari tombol menu "Login to Plesk Panel"

3. Pilih menu "Files" cari folder/directory "httpdocs"

4. Setelah itu kita akan membuat sebuah folder baru dengan cara klik "icon tambah/plus" ---- "Create Directory". 

5. Saran saya gunakan huruf kecil semua dan tanpa spasi, jika memang memerlukan spasi ganti dengan tanda strip. Folder ini sesuai nama materi MPI yang dibuat. Misalnya disini saya buat "belajar-mpi"

6. Upload file MPI format ZIP tadi dengan cara klik "icon tambah/plus" --- "Upload file"

7. Tunggu proses upload selesai. Setelah itu lakukan ekstrak dengan cara klik file akan muncul pilihan "Extract Files"

8. Kemdian cari file "story.html" ubah menjadi "index.html" melaui menu "Rename"

9. Hasilnya akan menjadi seperti gambar di bawah ini:

10. Kemudian untuk membuka Multimedia Pembelajaran (MPI) yang sudah di upload, Bapak/Ibu Guru tinggal buka saja link domainya diikuti / (slash) nama folder misalnya: https://websp.my.id/belajar-mpi/

C. Penutup

Demikianlah yang bisa saya share bagaimana cara mengonlinekan Multimedia Pembelajaran Interaktif (MPI) berbasis web html5 ke server hosting.

Dengan cara ini maka MPI bisa dibuka oleh siswa atau kesiapapun dengan cara membagikan linknya. MPI ini juga cocok untuk diupload di web elearning atau LMS.

Apabila ada yang masih kurang jelas, jangan ragu untuk ditanyakan di kolom komentar. Di sini kita sama-sama belajar.

Semoga bermanfaat.

Wassalamualaikum Wr. Wb.

Sumber referensi: https://id.wikipedia.org/wiki/HTML5