All Modul Pdp

LAMPIRAN 10B-1

CONTOH SUSUSAN ANTARA MUKA PENGGUNA

498
10B • CARTA ALIR REKA BENTUK INTERAKSI SAINS KOMPUTER • TINGKATAN 4

LAMPIRAN 10B-1

CONTOH SUSUSAN ANTARA MUKA PENGGUNA

499
10B • CARTA ALIR REKA BENTUK INTERAKSI SAINS KOMPUTER • TINGKATAN 4

LAMPIRAN 10B-1

CONTOH SUSUSAN ANTARA MUKA PENGGUNA

500
10B • CARTA ALIR REKA BENTUK INTERAKSI SAINS KOMPUTER • TINGKATAN 4

Standard
Pembelajaran:

3.2.1

LEMBARAN KERJA 10B-1 SAINS KOMPUTER • TINGKATAN 4

NAMA: TARIKH:
KELAS:

Contoh carta alir visual:

501 10A • REKA BENTUK INTERAKSI

Gunakan anak panah untuk menghubungkan proses aplikasi anda.
Kenal pasti bagaimana pengguna akan mengemudi aplikasi anda dari satu laman ke laman seterusnya
menggunakan simbol berikut:

Standard
Pembelajaran:

3.2.1

LEMBARAN KERJA 10B-1

Lukiskan carta alir visual anda dalam ruangan di bawah:

SAINS KOMPUTER • TINGKATAN 4

502 10A • REKA BENTUK INTERAKSI

Terangkan proses reka bentuk interaksi.
________________________________________________________________________________________________________________
________________________________________________________________________________________________________________

Komen guru:

Tarikh:

TIKET KELUAR Fikirkan semula
pengajaran pada
ATUR CARA VISUAL APLIKASI hari ini. Adakah
anda mempelajari
sesuatu yang baru dan
bermakna? Adakah
objektif PDP pada
hari ini tercapai?

Lengkapkan jadual di bawah. SAINS KOMPUTER • TINGKATAN 4

Perkara yang saya belajar hari ini …

3

2 Perkara yang saya rasa menarik untuk pengajaran hari ini …
1 Soalan yang saya masih ada tentang pengajaran hari ini …

503

10A • REKA BENTUK INTERAKSI

PENGAJARAN 10C SAINS KOMPUTER • TINGKATAN 4

CARTA ALIR REKA BENTUK INTERAKSI

STANDARD KANDUNGAN
3.2 Paparan dan Reka Bentuk Skrin
STANDARD PEMBELAJARAN
Murid boleh:
3.2.2 Menghasilkan prototaip paparan dan reka bentuk skrin
Guru hendaklah memastikan di akhir penggunaan modul PdP
ini, murid dapat mencapai Standard Pembelajaran yang
dinyatakan di atas.

Kandungan Muka surat

Rancangan Pengajaran 10C 506

Tiket Keluar 509

PENGAJARAN 10C

STANDARD KANDUNGAN Masa: 60 Minit
3.1 Reka Bentuk Interaksi

STANDARD PEMBELAJARAN Penerapan Pemikiran SAINS KOMPUTER • TINGKATAN 4
Komputasional (PPK):
Murid boleh: • Algorithm and Procedures
3.2.2 Menghasilkan prototaip paparan dan (ALG)
reka bentuk skrin • Problem Decomposition (PD)
• Simulation (SIM)

BAHAN BANTU MENGAJAR (BBM)

Bahan untuk kelas
1. Video Reka Bentuk Interaksi:
https://www.youtube.com/watch?v=5691BxRt2lI

Bahan untuk setiap kumpulan
Tiada

Bahan untuk setiap murid 505
1. Tiket keluar
2. Komputer / Komputer riba

SUMBER TAMBAHAN 10C •CARTA ALIR REKA BENTUK INTERAKSI

1. Tutorial MIT App inventor:
http://appinventor.mit.edu/explore/ai2/beginner-videos.html

RANCANGAN PENGAJARAN 10C

MASA CADANGAN AKTIVITI BBM PEMETAAN

5 Set Induksi • Video
Minit
proses SAINS KOMPUTER • TINGKATAN 4

1. Guru menunjukkan video yang menunjukkan contoh reka bentuk
interaksi:
aplikasi yang dihasilkan oleh MIT App Inventor
Contoh video yang boleh ditunjukkan: https://www. https://
www.
youtube.com/watch?v=5691BxRt2lI.
2. Guru menerangkan bahawa aplikasi yang baru ditunjukkan youtube.
boleh dihasilkan dengan mudah menggunakan aplikasi comwatch?
MIT App Inventor dan murid akan belajar cara v=5691B
menggunakannya untuk menghasilkan aplikasi lakaran xRt2lI

pengajaran lepas.

10 Aktiviti 1: Pengenalan kepada App Inventor • Komputer Standard
Minit / Komputer Pembelajaran
1. Guru mengimbas kembali pengajaran lepas dengan riba 3.2.2
menanyakan kepada murid bagaimana kita dapat
menggambarkan proses aplikasi yang dibina. Jawapan PPK
yang dijangka daripada murid: Carta Alir Visual. PD
2. Guru berkongsi carta alir visual terbaik daripada murid ALG
pengajaran lepas. SML
3. Guru menjelaskan untuk pengajaran hari ini, murid
akan membina aplikasi yang telah dilukis menggunakan 506
App Inventor.
4. Guru menjelaskan murid hanya perlu menukar 10C •CARTA ALIR REKA BENTUK INTERAKSI
susunan atur antara muka pengguna yang telah dibuat
dalam lembaran kerja ke dalam App Inventor.
5. Guru mengarahkan murid untuk mula menggunakan App
Inventor dengan mengikut arahan berikut:
a. Murid perlu ke laman web: http://appinventor.mit.edu/
explore/.
b. Tekan pada butang jingga di sebelah atas kanan:
Create Apps!.
c. Teruskan dengan menggunakan akaun Google murid.
d. Tekan butang ‘Continue’ apabila keluar “pop-up”
pengumuman.
e. Tekan butang ‘Start new project’.
f. Berikan nama aplikasi anda untuk Project Name tanpa
space.
g. Tekan ‘Ok’.
h. Tekan pada project anda.

RANCANGAN PENGAJARAN 10C

MASA CADANGAN AKTIVITI BBM PEMETAAN

i. Murid akan nampak paparan berikut setelah nama telah SAINS KOMPUTER • TINGKATAN 4
ditetapkan:

j. Gunakan Palette di bahagian kiri untuk memilih susun 507
atur laman pada aplikasi.
k. Gunakan Palette ‘User Interface’, ‘Layout’ dan ‘Media’ 10C •CARTA ALIR REKA BENTUK INTERAKSI
untuk melengkapkan laman aplikasi.
l. Murid hanya perlu drag and drop block pada Palette
yang diperlukan. Contoh adalah seperti berikut:

m. Teks pada butang “Button” boleh diubah dibahagian
Properties sebelah kanan skrin.

RANCANGAN PENGAJARAN 10C

MASA CADANGAN AKTIVITI BBM PEMETAAN

n. Murid boleh mencari gambar di internet untuk memuat SAINS KOMPUTER • TINGKATAN 4
naik ke App Inventor jika diperlukan.
o. Untuk menambahkan laman pada aplikasi, tekan
butang ‘Add Screen’.
p. Bahagian “Layout” pada Palette memberikan pilihan
kepada murid untuk menyusun gambar atau butang
secara melintang (horizontal), tegak (vertical)
atau dalam bentuk jadual (table).
6. Guru memberikan masa selama 10 minit kepada murid
untuk menyesuaikan diri dengan App Inventor.

15 Minit Aktiviti 2: Membina Aplikasi • Kertas Standard
Pembelajaran
A3 / Kertas 3.2.2

1. Guru meminta murid untuk merujuk Lembaran Kerja 10B-1 Mahjong
daripada Pengajaran 10B. • Lembaran

2. Guru meminta murid untuk memindahkan rekaan mereka Kerja 10B-1
(Pengajaran
di atas lembaran ke App Inventor.
3. Guru menjelaskan bahawa fokus murid bukanlah untuk 10B)

membina setiap laman aplikasi.

4. Guru menjelaskan laman aplikasi yang penting adalah

laman utama aplikasi tersebut.

5. Guru meminta 2-3 orang murid untuk berkongsi aplikasi 508

mereka setelah siap.

10 Minit Penutup • Tiket Keluar

1. Guru merumuskan pengajaran hari ini. 10C •CARTA ALIR REKA BENTUK INTERAKSI
2. Murid mengisikan tiket keluar.
3. Beberapa orang murid dipilih untuk berkongsi jawapan
tiket keluar.

TIKET KELUAR Fikirkan semula
pengajaran pada
ATUR CARA VISUAL APLIKASI hari ini. Adakah
anda mempelajari
sesuatu yang baru dan
bermakna? Adakah
objektif PDP pada
hari ini tercapai?

Lengkapkan jadual di bawah. SAINS KOMPUTER • TINGKATAN 4

Perkara yang saya belajar hari ini …

3

2 Perkara yang saya rasa menarik untuk pengajaran hari ini …
1 Soalan yang saya masih ada tentang pengajaran hari ini …

509

10C •CARTA ALIR REKA BENTUK INTERAKSI

PENGAJARAN 10D SAINS KOMPUTER • TINGKATAN 4

CARTA ALIR REKA BENTUK INTERAKSI

STANDARD KANDUNGAN
3.2 Paparan dan Reka Bentuk Skrin

STANDARD PEMBELAJARAN
Murid boleh:
3.2.3 Membincangkan laporan dari penilaian kuantitatif
terhadap paparan dan reka bentuk skrin

Guru hendaklah memastikan di akhir penggunaan modul PdP
ini, murid dapat mencapai Standard Pembelajaran yang
dinyatakan di atas.

Kandungan Muka surat

Rancangan Pengajaran 10D 512

Lembaran Kerja 10D-1 514

Lembaran Kerja 10D-2 515

Tiket Keluar 516

PENGAJARAN 10D

STANDARD KANDUNGAN
3.1 Reka Bentuk Interaksi

STANDARD PEMBELAJARAN Masa: 60 Minit SAINS KOMPUTER • TINGKATAN 4
3.2.3 Membincangkan laporan daripada
penilaian kuantitatif terhadap Penerapan Pemikiran
paparan dan reka bentuk skrin Komputasional (PPK):
• Algorithm and Procedures
BAHAN BANTU MENGAJAR (BBM) (ALG)
Bahan untuk kelas • Problem Decomposition (PD)
Tiada

Bahan untuk setiap kumpulan
1. Kertas A3 / Kertas Mahjong

Bahan untuk setiap murid
1. Lembaran Kerja 10D-1
2. Lembaran Kerja 10D-2
3. Tiket keluar

SUMBER TAMBAHAN 511

1. Contoh Reka Bentuk Interaksi Rubrik:
https://developer.gnome.org/accessibility-devel-guide/stable/gad-
checklist.html.en

10D •CARTA ALIR REKA BENTUK INTERAKSI

RANCANGAN PENGAJARAN 10D

MASA CADANGAN AKTIVITI BBM PEMETAAN

5 Minit Set Induksi • Aplikasi MIT
App
1. Guru menunjukkan salah satu aplikasi yang dihasilkan oleh Inventor SAINS KOMPUTER • TINGKATAN 4
murid pada pengajaran yang lepas.
2. Murid menilai sama ada aplikasi yang ditunjukkan.
3. Guru menerangkan sesuatu aplikasi susah dinilai tanpa
instrumen pernilaian yang sesuai.

10 Minit Aktiviti 1: Kriteria Utama semasa Membina Instrumen Penilaian • Kertas Standard
Pembelajaran
Paparan & Reka bentuk Skrin Mahjong 3.2.2

1. Guru menerangkan murid akan belajar menghasilkan • Lembaran PPK
Kerja PD
instrumen pernilaian paparan dan reka bentuk skrin. ALG
2. Guru menunjukkan borang pernilaian daripada Pengajaran 10D-1
KA21
10A (Lembaran Kerja 10.1) sebagai contoh. KS

3. Setiap kumpulan dikehendaki untuk membuat aktiviti

sumbang saran untuk mengenal pasti kriteria yang

diperlukan dalam instrumen pernilaian paparan dan reka

bentuk skrin. 512
4. Guru perlu mengingatkan murid bahawa kriteria perlu
dapat diukur dan spesifik.
5. Guru meminta murid menyenaraikan kriteria penilaian

dengan kaedah senarai semak, soal selidik, atau rubrik

yang mudah.

Contoh Kriteria:

• Kesenangan Pembelajaran 10D •CARTA ALIR REKA BENTUK INTERAKSI
Bolehkah pengguna baru mengemudi reka bentuk
tersebut dengan mudah?
• Pemahaman
Bolehkah pengguna memahami apa yang dilihat

dengan mudah?

• Daya Penarikan
Adakah reka bentuk tersebut menarik secara
visual?
• Kecekapan
Berapa cepatnya pengguna boleh melakukan

tugas?

(Sebagai pengukuran, adalah dinasihatkan bahawa pengguna

dapat menyelesaikan tugas dalam maximum 3 hingga 5 klik)

• Pengekalan
Berapa lamakah seseorang pengguna boleh
mengingati muka pengguna jika pengguna
tersebut tidak melawati aplikasi tersebut dalam

jangka masa yang panjang?

(Jikalau pengguna tidak melawati sesuatu aplikasi [contoh:
WeChat] pengguna dapat menggunakannya tanpa mempelajari

antara muka pengguna tersebut semula)

RANCANGAN PENGAJARAN 10D

MASA CADANGAN AKTIVITI BBM PEMETAAN

15 Minit • Ralat SAINS KOMPUTER • TINGKATAN 4
10 Minit Kekerapan pengguna melakukan kesilapan dalam
interaksinya dengan aplikasi dan betapa mudah untuk
pengguna memulihkan diri daripada kesilapan tersebut.
• Kepuasan
Adakah pengguna berpuas hati dengan pengalaman
mereka berinteraksi dengan aplikasi?

6. Setiap kumpulan diberikan kertas mahjong untuk aktiviti
sumbang saran tersebut.
7. Setiap kumpulan kemudiannya membentangkan hasil kerja
masing-masing.
8. Guru memberikan ulasan dan membetulkan sebarang
kesilapan.
9. Guru mengumpulkan dan memilih idea kriteria pernilaian
yang sesuai daripada pembentangan setiap kumpulan.
10. Murid kemudiannya mengisikan template dalam lembaran
kerja 10D-1 dengan kriteria yang diputuskan semasa aktiviti
sumbang saran.

Aktiviti 2: Menguji Instrumen Pernilaian • Lembaran

1. Guru menerangkan bahawa murid perlu menilai aplikasi Kerja 10D-1

masing-masing menggunakan instrumen penilaian yang • Lembaran 513

dihasilkan.
2. Setiap murid dikehendaki untuk membuka semula aplikasi Kerja 10D-2
yang dihasilkan semasa pengajaran yang lepas dan
memberikan markah menggunakan instrumen pernilaian yang • Komputer
riba/
dihasilkan dalam Lembaran Kerja 10D-1
3. Murid kemudiannya mengisikan Lembaran Kerja 10D-2 Komputer

dengan langkah penambahbaikan aplikasi masing- • MIT App 10D •CARTA ALIR REKA BENTUK INTERAKSI

masing supaya dapat memenuhi instrumen pernilaian.
4. Murid kemudiannya menambahbaik aplikasi masing-masing Inventor

berdasarkan Lembaran Kerja 10D-2.

Penutup • Tiket keluar

1. Guru merumuskan pengajaran hari ini.

2. Murid mengisikan tiket keluar.

3. Beberapa orang murid dipilih untuk berkongsi jawapan tiket

keluar.

Standard
Pembelajaran:

3.1.3

LEMBARAN KERJA 10D-1 SAINS KOMPUTER • TINGKATAN 4

NAMA: TARIKH:
KELAS:

Isikan jadual di bawah dengan kriteria yang sesuai untuk menghasilkan satu rubrik
penilaian paparan dan reka bentuk skrin.

Markah

Kriteria

514

Jumlah Markah 10D •CARTA ALIR REKA BENTUK INTERAKSI

Komen guru:

Tarikh:

Standard
Pembelajaran:

3.1.3

LEMBARAN KERJA 10D-2 SAINS KOMPUTER • TINGKATAN 4

NAMA: TARIKH:
KELAS:

Senaraikan penambahbaikan yang ingin anda lakukan untuk aplikasi anda.

515

10D •CARTA ALIR REKA BENTUK INTERAKSI

Komen guru:

Tarikh:

TIKET KELUAR Fikirkan semula
pengajaran pada
INSTRUMEN PENILAIAN VISUAL APLIKASI hari ini. Adakah
anda mempelajari
sesuatu yang baru dan
bermakna? Adakah
objektif PDP pada
hari ini tercapai?

Lengkapkan jadual di bawah. SAINS KOMPUTER • TINGKATAN 4

Perkara yang saya belajar hari ini …

3

2 Perkara yang saya rasa menarik untuk pengajaran hari ini …
1 Soalan yang saya masih ada tentang pengajaran hari ini …

516

10D •CARTA ALIR REKA BENTUK INTERAKSI