JURNAL PENGABDIAN KEPADA MASYARAKAT
FORDICATE (INFORMATICS ENGINEERING DEDICATION)
E-ISSN: 2809-2546
VOL 4.
NO.
1 TAHUN 2024
PELATIHAN PENGEMBANGAN DESAIN GAME DENGAN
HTML DAN CSS PADA SMA NEGERI 3 PALEMBANG
Diva Putri Kynta1*).
Ivan Luthfi Laksono2, & Vannes Wijaya3 1,2,3Universitas Multi Data Palembang Email: 1divakynta@mhs.
id, 2ivanlaksono@mhs.
id, 3vanneswijaya04@mhs.
Key Words:
CSS.
CodePen.
HTML.
JavaScript.
SMA Negeri 3 Palembang.
Abstract: Along with the advancement of information and communication technology, developments in this field continue to experience rapid improvement, one of which is technology in games.
This training aims to provide a basic understanding and practice of game design development using web technologies, namely HTML.
CSS, and JavaScript.
In this training.
SMA Negeri 3 Palembang students used the CodePen platform as a learning medium with with theoretical and practical methods.
CodePen is a website to display games from the coding made.
With CodePen, the structure and appearance can allow participants to create, test, and share code interactively in one integrated work This community service project aims to introduce web-based game development technology to participants, increase participants' understanding of the basics of design and logic in making games, and hone creativity.
In this training, the average result obtained from the Pre Test was 11,4 and the average result obtained by the Post Test was 45,34.
Abstrak: Seiring dengan kemajuan teknologi informasi dan komunikasi, perkembangan di bidang ini terus mengalami peningkatan yang pesat, salah satunya teknologi dalam game.
Pelatihan ini bertujuan untuk memberikan pemahaman dasar dan praktik pengembangan desain game menggunakan teknologi web, yaitu HTML.
CSS, dan JavaScript.
Pada pelatihan ini Siswa SMA Negeri 3 Palembang menggunakan platform CodePen sebagai media pembelajaran dengan metode teori dan praktek.
CodePen merupakan sebuah website untuk menampilkan game dari coding yang dibuat.
Dengan CodePen, struktur dan tampilan dapat memungkinkan peserta untuk membuat, menguji, dan berbagi kode secara interaktif dalam satu lingkungan kerja yang terintegrasi.
Pada proyek pengabdian masyarakat ini bertujuan untuk mengenal teknologi pengembangan game berbasis web kepada peserta, meningkatkan pemahaman peserta terhadap dasar-dasar desain dan logika dalam pembuatan game, dan mengasah kreativitas.
Pada pelatihan ini rata-rata hasil yang didapatkan dari Pre Test sebesar 11,4 dan rata-rata hasil yang didapatkan Post Test sebesar 45,34.
Kynta, dkk.
Pelatihan Pengembangan Desain Game Dengan HTML Dan CSS Pada SMA Negeri 3 Palembang.
Jurnal Pengabdian Kepada Masyarakat Fordicate This is an open-access article under the CC-BY-CA license Universitas Multi Data Palembang | 30
JURNAL PENGABDIAN KEPADA MASYARAKAT
FORDICATE (INFORMATICS ENGINEERING DEDICATION)
E-ISSN: 2809-2546
VOL 4.
NO.
1 TAHUN 2024
PENDAHULUAN
Dari waktu ke waktu, kemajuan teknologi terus mengalami perkembangan pesat, dimulai dari era teknologi pertanian, era teknologi industri, hingga era teknologi informasi dan komunikasi.
Setiap fase perkembangan ini membawa dampak yang signifikan dalam berbagai aspek kehidupan masyarakat, baik dalam skala individu maupun dalam konteks berbangsa dan bernegara.
Perkembangan teknologi ini menarik perhatian banyak individu untuk memanfaatkan dan mengintegrasikan inovasi tersebut ke dalam kehidupan sehari-hari, membuka peluang sekaligus tantangan baru di berbagai bidang .
Salah satu perkembangan teknologi yang ada dalam bidang game.
"Game" dalam kamus bahasa Indonesia berarti permainan.
Sebuah permainan adalah sistem di mana pemain terlibat dalam konflik buatan.
Dalam permainan, mereka berinteraksi dengan sistem konflik yang dibuat atau direkayasa.
Peraturan dalam permainan bertujuan untuk membatasi perilaku pemain dan menentukan permainan .
Pada pelatihan ini, penulis memanfaatkan perkembangan teknologi yang ada salah satunya yaitu teknologi web.
Penulis memberi pelatihan pada Siswa-Siswi SMAN 3 Palembang dari konsep dasar desain game kemudian menggunakan CodePen untuk membuat sebuah game sederhana menggunakan bahasa pemrograman web yaitu HTML.
CSS, dan JavaScript sebagai media pembelajaran karena kesederhanaan dan kemudahan penggunaannya.
Desain merupakan serapan dari bahasa Inggris "design", yang memiliki arti "rancangan, rencana, atau reka rupa.
" Dari kata design, muncul istilah desain yang berarti mencipta, memikirkan, atau merancang.
Dalam konteks ini, desain dapat diartikan sebagai sebuah rancangan yang terdiri dari susunan garis, bentuk, ukuran, warna, serta nilai .
, dan benda yang dibuat berdasarkan prinsip-prinsip desain sebagai "kata benda" .
Website atau situs adalah kumpulan halaman yang dirancang untuk menyajikan informasi dalam berbagai bentuk, seperti teks, gambar statis maupun bergerak, animasi, suara, atau kombinasi dari semuanya.
Halaman-halaman ini dapat bersifat statis atau dinamis, membentuk struktur yang saling terhubung melalui jaringan tautan .
HTML, atau Hyper Text Markup Language, adalah bahasa markup dasar yang digunakan untuk membangun halaman web.
Fungsinya adalah menampilkan berbagai informasi melalui browser internet yang digunakan oleh pengguna.
HTML merupakan standar resmi untuk internet dan telah diakui serta disahkan oleh organisasi World Wide Web Consortium (W3C) .
HTML, sebagai kerangka dasar, memungkinkan siswa untuk memahami bagaimana elemen-elemen dalam game dapat diatur dan disusun.
Dengan menggunakan HTML, siswa dapat memahami cara menyusun konten dan elemen-elemen yang akan muncul dalam game mereka, seperti tombol, teks, gambar, dan elemen interaktif lainnya.
CSS merupakan singkatan dari Cascading Style Sheet yaitu sebuah serangkaian dokumen web yang berguna untuk mengatur struktur elemen pada HTML dengan berbagai macam properti yang tersedia sehingga dapat tampil dengan berbagai gaya yang diinginkan.
CSS adalah dokumen web yang cocok untuk organisasi elemen HTML dengan properti berbeda tersedia untuk ditampilkan dalam gaya apapun yang anda inginkan .
Dengan CSS, siswa bisa dengan mudah merancang game agar tampak menarik, mengatur warna, layout, dan animasi.
CSS membuat siswa langsung melihat hasil desain mereka dalam waktu singkat.
JavaScript merupakan bahasa pemrograman yang dirancang khusus untuk pengembangan web.
Bahasa ini berjalan di sisi klien .
lient-sid.
, dengan kemampuan interaktif yang unggul.
JavaScript memungkinkan pembuatan aplikasi web yang responsif.
Selain itu.
JavaScript sering dimanfaatkan dalam pengembangan web, baik pada bagian front-end maupun back-end .
JavaScript memungkinkan siswa membuat game yang lebih hidup dan interaktif.
Siswa dapat membuat game menjadi bergerak, menciptakan aksi, dan menghitung skor.
Pada pelatihan ini menggunakan platform CodePen sebagai media pembelajaran.
CodePen merupakan sebuah website untuk menampilkan game dari coding yang dibuat.
Dengan CodePen, struktur dan tampilan dapat memungkinkan peserta untuk membuat, menguji, dan berbagi kode secara interaktif dalam satu lingkungan kerja yang memudahkan Siswa untuk memahami struktur dari game.
Pelatihan Pengembangan Desain Game A | 31
JURNAL PENGABDIAN KEPADA MASYARAKAT
FORDICATE (INFORMATICS ENGINEERING DEDICATION)
E-ISSN: 2809-2546
VOL 4.
NO.
1 TAHUN 2024
Pada pelatihan ini membuat game card yang berjudul SAMORI singkatan dari Asah Memori yaitu permainan yang menguji kemampuan mengingat dengan mencocokkan kartu berpasangan .
Pemain harus mengingat jenis dan posisi kartu untuk menemukan pasangan yang sesuai.
dalam penjelasan game menggunakan penjelasan analogi tubuh manusia, seperti CSS adalah kulit luar atau tampilan, kemudian HTML adalah tulang sebagai kerangka dalam web, dan JavaScript sebagai syaraf atau otot yang menggerakkan atau menghubungakan tampilan dan kerangka agar bisa menjadi satu.
Pada pelatihan ini, penulis memberikan pengetahuan dasar tentang JavaScript dengan menggunakan analogi tubuh manusia.
JavaScript diibaratkan sebagai otot, yang berfungsi untuk menggerakkan dan menghubungkan elemen-elemen dalam game.
HTML berfungsi sebagai kerangka tulang, membentuk struktur dasar game, sementara CSS berperan sebagai kulit, yang memberi tampilan visual.
Tanpa JavaScript, meskipun HTML dan CSS sudah ada, game tidak akan bisa berjalan atau berinteraksi.
JavaScript membuat semua elemen dalam game menjadi hidup dan saling terhubung, seperti otot yang menggerakkan tubuh.
IDENTIFIKASI MASALAH
Di era digital, pemanfaatan teknologi dalam dunia pendidikan terus berkembang, termasuk penggunaan permainan edukatif sebagai media pembelajaran.
Dengan melakukan desain game sambil belajar.
Metode ini bertujuan untuk menjadikan proses belajar mengajar lebih menarik dan interaktif, sehingga dapat mendorong motivasi belajar Siswa .
Pada kegiatan pelatihan pengembangan desain game dengan HTML dan CSS bertujuan untuk meningkatkan minat Siswa untuk meningkatkan pengetahuan Siswa dalam bidang Apa yang telah penulis sampaikan saat pelatihan juga modul yang diberikan untuk materi pasca pelatihan diharapkan dapat menjadi stimulus positif bagi peserta pelatihan, sekaligus mendorong penerapan ilmu yang telah diperoleh.
Penulis juga berharap peserta yang mengikuti pelatihan ini mampu meningkatkan keterampilan mereka serta memperkaya proses belajar mengajar dengan cara yang lebih kreatif dan inovatif.
METODELOGI PELAKSANAAN
Pada kegiatan pelatihan ini dilaksanakan pada tanggal 26 Mei 2023 di SMA Negeri 3 Palembang, dalam pelaksanaan kegiatan pengabdian kepada masyarakat agenda yang direncanakan hingga pelaksanaan pengabdian seperti disajikan pada Tabel 1:
Tabel 1.
Jadwal Pelaksanaan Pengabdian Pelatihan Desain Game Dengan HTML dan CSS
Waktu Total Jam Kegiatan 20 Maret 2023
2 Jam Briefing kegiatan yang akan dilaksanakan 23 Maret 2023
6 Jam Pembuatan proposal pengajuan surat pengantar 26 Maret 2023
7 Jam Pembuatan modul ajar
30 Maret 2023
6 Jam Pembuatan slide presentasi
4 April 2023
1 Jam Memberikan surat pengantar permohonan izin pelatihan kepada SMA Negeri 3 Palembang
25 Mei 2023
3 Jam Melakukan simulasi latihan kegiatan yang akan 32 | Pelatihan Pengembangan Desain Game A JURNAL PENGABDIAN KEPADA MASYARAKAT
FORDICATE (INFORMATICS ENGINEERING DEDICATION)
E-ISSN: 2809-2546
VOL 4.
NO.
1 TAHUN 2024
25 Mei 2023 1 Jam Konfirmasi pada sekolah dan mendapat surat balasan dari SMA Negeri 3 Palembang 26 Mei 2023 2 Jam Pelaksanaan kegiatan pelatihan di SMA Negeri 3 Palembang Pada pelaksanaan kegiatan pelatihan menggunakan metode teori dan praktek.
Secara teori tim kami membahas dengan memberi pembahasan slide dan pemberian yang akan digunakan untuk pemahaman Siswa tentang desain game, sejarah desain, perbedaan desain game dan developer game, analogi HTML.
CSS, dan JAVASCRIPT.
Kemudian secara praktek kami mengajarkan secara langsung sesuai modul yang kami buat dan menjelaskan kegunaan syntax dasar pada HTML seperti h1, title, header dan body.
Pelaksanaan kegiatan pelatihan selama 2 jam di lakukan dibagi beberapa tahap sesi, seperti disajikan pada Tabel 2:
Tabel 1.
Jadwal Kegiatan Pelatihan Desain Game Dengan HTML dan CSS Materi Waktu Pelatihan Pengenalan diri dan kata sambutan 5 menit Pre test 5 menit Pembahasan materi slide pengenalan HTML.
CSS, dan JavaScript, dan absensi peserta 20 menit Penyedian coding JavaScript di barcode dan melakukan coding HTML di website CodePen untuk membuat konten game memory match 30 menit Coding di CSS di website CodePen untuk membuat tampilan game memory match 30 menit Post test 5 menit Sesi tanya jawab dan pemberian hadiah 20 menit Foto bersama peserta 5 menit Total Waktu 2 Jam HASIL DAN PEMBAHASAN Kegiatan pelatihan ini dilaksanakan secara tatap muka di laboratorium komputer SMA Negeri 3 Palembang.
Jl.
Jend.
Sudirman No.
RT.
Pahlawan.
Kec.
Kemuning.
Kota Palembang.
Pelatihan diikuti oleh Siswa kelas 12 MIPA yang dilaksanakan secara terstruktur, rapi dan sesuai ekspetasi penulis, jumlah peserta yang mengikuti 35 orang.
Penulis melakukan persiapan sebelum melaksanakan kegiatan pelatihan.
Dimulai dari briefing sesama tim, apa saja yang akan disampaikan, membuat materi bahan ajar, lalu kemudian melakukan latihan simulasi agar hasil bisa maksimal.
Materi yang kami berikan dalam bentuk softcopy yang kemudian akan ditampilkan di proyektor agar mahasiswa dapat mengikuti kegiatan pelatihan dengan terarah serta sesuai prosedur yang Dalam kegiatan pelatihan, peserta akan diarahkan dan diperkenalkan menggunakan CodePen dengan tema Pelatihan Pengembangan Desain Game dengan HTML dan CSS.
Pelatihan Pengembangan Desain Game A | 33
JURNAL PENGABDIAN KEPADA MASYARAKAT
FORDICATE (INFORMATICS ENGINEERING DEDICATION)
E-ISSN: 2809-2546
VOL 4.
NO.
1 TAHUN 2024
Selama kegiatan pelatihan berlangsung peserta Siswa SMA Negeri 3 Palembang sangat aktif dan cermat memperhatikan sehingga materi dapat diterima dan dipahami oleh peserta pelatihan dengan baik terbukti pada hasil Post Test dan peserta sangat antusias menerima dan mendengar pemaparan materi yang disajikan oleh tim penulis.
Gambar 1.
Narasumber Memberi Pemaparan Materi Pada pelatihan ini membuat sebuah game sederhana yaitu game memori match dimana untuk code JavaScript pada CodePen sudah disediakan di barcode, untuk pembelajaran yaitu desain HTML dan CSS yang selebihnya nanti disediakan barcode script HTML dan CSS ketika sudah selesai pemaparan materi.
Berikut Gambar 2 merupakan tampilan web game memory match menggunakan platform CodePen.
34 | Pelatihan Pengembangan Desain Game A JURNAL PENGABDIAN KEPADA MASYARAKAT
FORDICATE (INFORMATICS ENGINEERING DEDICATION)
E-ISSN: 2809-2546
VOL 4.
NO.
1 TAHUN 2024
Gambar 2.
Tampilan Game menggunakan platform CodePen Sebagai bentuk evaluasi, penulis melaksanakan Pre Test dan Post Test agar mengukur pemahaman Siswa sebelum dan sesudah pemaparan materi.
Pre Test digunakan untuk menilai kemampuan awal peserta didik, sedangkan Post Test berfungsi untuk mengukur hasil akhir dari kompetensi mereka.
Evaluasi sendiri merupakan proses penilaian dengan membandingkan tujuan yang telah ditetapkan dengan hasil atau pencapaian nyata yang diperoleh peserta didik .
Pada evaluasi Pre Test dan Post Test terdiri dari 10 soal dengan poin atau jawaban menggunakan skala likert yaitu 5 poin sehingga maks poin 50.
Untuk hasil evaluasi dapat diperlihatkan pada Gambar 3 sebagai berikut:
Grafik Nilai Pre Test dan Post Test
SMAN 3 Palembang
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Nilai Pre Test Nilai Post Test Gambar 3.
Grafik Peningkatan Pemahaman Siswa/Siswi Sebelum Dan Sesudah Pelatihan Materi Rata-rata hasil yang didapatkan dari Pre Test sebesar 11,4 dan rata-rata hasil yang didapatkan Pos Test sebesar 45,34, dimana angka ini naik cukup tinggi sebelum melakukan pelatihan.
Setelah melakukan Pre Test dan Post Test, penulis melakukan sesi tanya jawab dan pemberian hadiah, agar mengetahui pengetahuan peserta selama sesi pemaparan materi.
Setelah melakukan sesi tanya jawab, penulis melakukan foto bersama peserta berikut Gambar 4 merupakan foto bersama peserta.
Pelatihan Pengembangan Desain Game A | 35
JURNAL PENGABDIAN KEPADA MASYARAKAT
FORDICATE (INFORMATICS ENGINEERING DEDICATION)
E-ISSN: 2809-2546
VOL 4.
NO.
1 TAHUN 2024
Gambar 4.
Foto Bersama Peserta Pelatihan San Narasumber SIMPULAN Selama pelatihan Siswa-Siswi kreatif dalam mengganti warna, ukuran dan tulisan dalam game sesuai kreasi masing-masing.
Dengan adanya pelatihan ini membuat minat peserta tertarik dengan informatika khususnya dalam coding mendesain sebuah game.
Hasil kegiatan pengabdian kepada masyarakat yang telah kami laksanakan berjalan dengan baik tanpa kendala, sehingga kami menarik kesimpulan, yaitu.
Siswa-Siswi SMA Negeri 3 Palembang mampu memahami materi yang disampaikan, dan dapat mempraktekkannya secara langsung dengan baik.
DAFTAR PUSTAKA