Bahan Tayang Pembuatan Website Pembelajaran

Program Akademi

Tema Pelatihan

Pertemuan #4- : PEMBUATAN WEBSITE PEMBELAJARAN

Profil Pengajar

S2 Teknologi Hasil Pertanian
Widyaiswara Ahli Muda
Kementerian Pertanian

S2 Ilmu Akuntansi Contact Pengajar 2
Widyaiswara Ahli Muda Ponsel : 0812-2422-4121
BPSDM Provinsi Sumatera Barat Email : [email protected]

Contact Pengajar 1
Ponsel : 0812-6717-825
Email : [email protected]

DTS 2021

Mata Pelatihan ini memfasilitasi peserta Course Definition

untuk mengenal platform website
pembelajaran, membuat website baru,
mendesain tampilan website,
menambahkan konten dan
mempublikasikannya.

DTS 2021 #Jadijagoandigital

Learning Objective #Jadijagoandigital

Kompetensi Dasar:
Seteplaehsemrteangdiikhuartai ppkemanbmelaamjarpaun ini,

merancang situs untuk
pembelajaran sesuai kebutuhan.

DTS 2021

Learning Objective

Indikator Keberhasilan: platform website
A. Menjelaskan manfaat
pembelajaran;
BCDE....MMMMeeeemnlnagybkkuuursakeutaannwsikpekoubanbnstiltetikeanambpsaiperwimulae;bnbeswlaitejeab.rsaitned; i web;

DTS 2021 #Jadijagoandigital

Referensi • Ali Zaki, 2009, Kiat Jitu Membuat Website
Tanpa Modal, Penerbit Elexmedia
Komputindo, Jakarta.

• Rusman, Belajar dan Pembelajaran Berbasis
Komputer, (Bandung : Alfabeta, 2012).

• Azis, T. N. (2019, December). Strategi
Pembelajaran Era Digital. In The Annual
Conference on Islamic Education and Social
Science (Vol. 1, No. 2, pp. 308-318).

• Budi Harsanto. Inovasi Pembelajaran Di Era
Digital: Menggunakan Google Sites dan
Media Sosial. Unpad Press. 2014.

DTS 2021 #Jadijagoandigital

Referensi • Irfana Steviano. Pemanfaatan Google Sites.
Artikel. 2021

• Rusman. Pembelajaran Berbasis Teknologi
Informasi dan Komunikasi. Jakarta: PT. Raja
Grafindo Persada. 2011.

• myblogzulhijatil.blogspot.com/2016/05/konse
p-pembelajaran-berbasis-web

• https://www.niagahoster.co.id/blog/cara-mem
buat-google-sites/

• https://qwords.com/blog/google-site-adalah/

DTS 2021 #Jadijagoandigital

INDIKATOR HASIL BELAJAR #1 #Jadijagoandigital
MENJELASKAN MANFAAT
PLATFORM WEBSITE
PEMBELAJARAN

DTS 2021

TOPIK 1 #Jadijagoandigital
PENGENALAN
WEBSITE PEMBELAJARAN

DTS 2021

Pengertian Website (1) #Jadijagoandigital

Situs web/situs/website /site) : sebutan
bagi sekelompok halaman web (web

page), yang merupakan bagian dari nama
domain (domain name) atau subdomain di

World Wide Web (WWW) di internet.

DTS 2021

Pengertian Website (2) #Jadijagoandigital

Web page : dokumen dalam format HTML
(Hyper Text Markup Language), yang bisa
diakses melalui HTTP, yaitu protokol yang

menyampaikan informasi dari server
website untuk ditampilkan kepada para

pemakai melalui web browser.

DTS 2021

Pembelajaran berbasis Website #Jadijagoandigital

Pembelajaran berbasis
web adalah proses belajar
mengajar yang dilakukan
dengan memanfaatkan
jaringan internet.

DTS 2021

Pembelajaran berbasis Website

DTS 2021 #Jadijagoandigital

Kelebihan Pembelajaran
berbasis Website

Belajar Sumber Belajar Pengayaan
dimanapun, yang efektif dan materi
kapanpun,
efisien pembelajaran
apapun.
Mudah update
Membuat Pembelajar lebih materi
pembelajaran aktif dan mandiri
menjadi bersifat pembelajaran

individual

Kemampuan Menyediakan
untuk membuat Sumber Belajar

tautan (link) tambahan

DTS 2021 #Jadijagoandigital

Kekurangan Pembelajaran berbasis Website

Hasil belajar Pengayaan materi
tergantung pembelajaran
kemandirian dan
motivasi pembelajar

Gangguan akses Dibutuhkan
dan jaringan panduan karena
internet. Informasi website
sangat beragam

Dibutuhkan Pembelajar merasa
peralatan yang terisolasi apabila
memadai dan terbatas fasilitas.
bandwidth cukup.
DTS 2021
#Jadijagoandigital

TOPIK 2 #Jadijagoandigital
MANFAAT
WEBSITE PEMBELAJARAN

DTS 2021

PEMANFAATAN PLATFORM GOOGLE SITE
SEBAGAI WEBSITE PEMBELAJARAN

MENGEMBANGKAN
SITUS SENDIRI.

MEMPUBLIKASIKAN SUPAYA MEMILIH KEPADA SIAPA SAJA
SITUS MUDAH DIAKSES SITUS TERSEBUT DIBAGIKAN.
SELUAS-LUASNYA.

MENGIZINKAN SIAPA DAPAT MELIHAT,
MENGEDIT DAN MEMPERBAIKI SITUS.

DTS 2021 #Jadijagoandigital

KEUNGGULAN V.S. KETERBATASAN
GOOGLE SITES

KEUNGGULAN KETERBATASAN

Integrasi dengan Tampilan admin Akses dari segala Tidak mendukung Tidak ada fasilitas
Google CRM, fitur jualan drag serta drop dalam
area simple perangkat. online serta kontrol
desain halaman
khusus website

Keamanan Website Gratis. Tidak memiliki
terjaga cepat Fitur sharing dukungan iframe

DTS 2021 serta script. #Jadijagoandigital

Pencarian File Translate atau penerjemah FITUR GOOGLE SITES

Pengaturan waktu

Pencarian atau search

Jadwal pertemuan Kalkulator Data Publik

DTS 2021 Produk Google lainnya

#Jadijagoandigital

MANFAAT WEBSITE PEMBELAJARAN

Pembelajaran Menyenangkan
Interaktivitas yang tinggi
Mengurangi biaya-biaya operasional
Fleksibilitas akses materi pelatihan

MANFAAT GOOGLE SITES

Pembelajaran Lebih Menarik.
Lebih mudah mendapatkan materi pembelajaran.
Materi pembelajaran tidak mudah hilang.
Peserta dapat mendapatkan informasi pembelajaran dengan cepat.
Dapat menyimpan RBPMP dan RP.
Tugas melalui google sites.

INDIKATOR HASIL BELAJAR #2
MEMBUAT WEBSITE BARU

DTS 2021 #Jadijagoandigital

TOPIK 1 #Jadijagoandigital

PEMBUATAN
USER INTERFACE

DTS 2021

MEMBUAT WEBSITE BARU
DI GOOGLE SITES

1. PEMBUATAN USER INTERFACE

✔ Masuk ke akun google sites.
✔ Silahkan Anda login ke google sites : https://sites.google.com.
✔ Masukkan akun email google anda, lalu klik tombol Next.

DTS 2021 #Jadijagoandigital

TOPIK 2 #Jadijagoandigital

PEMBUATAN
HALAMAN WEBSITE

DTS 2021

MEMBUAT WEBSITE BARU
DI GOOGLE SITES

2. PEMBUATAN HALAMAN WEBSITE

✔ Kemudian untuk memulai projek pembuatan website gratis Anda, klik tombol plus
(+) pada halaman utama google sites Anda.

DTS 2021 #Jadijagoandigital

INDIKATOR HASIL BELAJAR #3 #Jadijagoandigital

MENGKREASIKAN
TAMPILAN WEBSITE

DTS 2021

TOPIK 1 #Jadijagoandigital

MEMBERIKAN
NAMA WEBSITE

DTS 2021

MENGKREASIKAN TAMPILAN WEBSITE
DI GOOGLE SITES

A. BERIKAN NAMA WEBSITE

1. Site document name: Masukkan nama unik untuk melacak situs Anda.
2. Site name situs: Nama situs muncul di tajuk dan di bilah judul jendela web/seluler.
3. Page title: Setiap halaman di situs Anda diberi judul.
4. Add Logo: icon logo digunakan untuk memberikan identitas pada website.

DTS 2021 #Jadijagoandigital

TOPIK 2 #Jadijagoandigital

MENGUBAH GAMBAR
LATAR BELAKANG,
JENIS HEADER DAN
TEMA

DTS 2021

MENGKREASIKAN TAMPILAN WEBSITE
DI GOOGLE SITES

B. Ubah gambar latar belakang

1. Mengubah gambar latar belakang header dengan menampilkan gambar yang
cocok dengan tema website Anda.

2. Sorot gambar headernya -> klik tombol Change Image dipojok kiri bawah header,
lalu pilih Upload untuk gambar yang ada di dokumen kita, atau select image untuk
memilih template gambar yang disediakan di google sites.

DTS 2021 #Jadijagoandigital

MENGKREASIKAN TAMPILAN WEBSITE
DI GOOGLE SITES

B. Ubah gambar latar belakang

Hasilnya sebagai berikut…

DTS 2021 #Jadijagoandigital

MENGKREASIKAN TAMPILAN WEBSITE
DI GOOGLE SITES

C. Ubah Jenis Header

Arahkan kursor mouse ke gambar latar belakang dan klik Header type
kemudian pilih satu opsi sesuai dengan yang Anda inginkan:

DTS 2021 #Jadijagoandigital

D. Ubah Tema dan Gaya Font MENGKREASIKAN TAMPILAN WEBSITE
DI GOOGLE SITES
✔ Anda dapat berkreasi
dengan tampilan situs #Jadijagoandigital
dengan menentukan gaya
tema dan gaya font yang
akan digunakan.

✔ Caranya sangat mudah,
dipojok kanan atas anda
klik menu Themes lalu pilih
tema yang cocok dengan
kebutuhan situs anda.

DTS 2021

TOPIK 3 #Jadijagoandigital

MEMILIH TATA LETAK
WEBSITE

DTS 2021

MENGKREASIKAN TAMPILAN WEBSITE
DI GOOGLE SITES

E. Memilih Tata Letak Halaman Website

✔ Pilih layout yang cocok dengan halaman website Anda.
✔ Setelah itu Anda dapat mengedit Layout Isi Halaman Web Anda.

DTS 2021 #Jadijagoandigital

INDIKATOR HASIL BELAJAR #4 #Jadijagoandigital
MENYUSUN KONTEN
PEMBELAJARAN DI WEB

DTS 2021

TOPIK 1 #Jadijagoandigital

MEMASUKKAN
KONTEN BERUPA
GAMBAR/FOTO

DTS 2021

MENGKREASIKAN TAMPILAN WEBSITE
DI GOOGLE SITES

A. Memasukkan Konten Berupa Gambar/Foto

✔ Klik ikon (+) pada kotak sebelah kiri,
pilih Upload. Tentukan gambar yang
akan diunggah, klik Open.

DTS 2021 #Jadijagoandigital

TOPIK 2 #Jadijagoandigital

MEMASUKKAN
KONTEN BERUPA
TEKS

DTS 2021

B. Memasukkan Konten Berupa Teks MENGKREASIKAN TAMPILAN WEBSITE
DI GOOGLE SITES

✔ Klik kotak sebelah kanan, pada baris pertama anda masukkan judul pelatihan,
sedangkan baris kedua anda masukkan isi deskripsi pelatihan.

✔ Sedangkan untuk memberikan tautan pada teks, anda bisa sorot teksnya
terlebih dahulu lalu klik ikon tautan.

DTS 2021 #Jadijagoandigital

TOPIK 3 #Jadijagoandigital

MENDUPLIKATKAN
SECTION

DTS 2021

C. Menduplikat Section MENGKREASIKAN TAMPILAN WEBSITE
DI GOOGLE SITES

✔ Menambah konten dengan tata letak/layout yang sama dengan sebelumnya, anda bisa
memanfaatkan fitur Duplicate Section.

✔ Sorot section sebelumnya hingga muncul icon Duplicate Section di samping kiri halaman
web. Kemudian anda klik ikon tersebut, secara otomatis sectionnya akan tersalin

dibagian bawahnya.

DTS 2021 #Jadijagoandigital

TOPIK 4 #Jadijagoandigital

MEMBUAT HALAMAN
DAN SUB HALAMAN
BARU

DTS 2021

MENGKREASIKAN TAMPILAN WEBSITE
DI GOOGLE SITES
D. Membuat Halaman dan Sub Halaman Baru

✔ klik menu Page disamping kanan halaman web,
lalu klik icon New page (+) dibagian bawahnya.

✔ Anda tentukan nama halaman webnya, misalkan
“Materi Pelatihan” lalu klik tombol Done.

DTS 2021 #Jadijagoandigital

D. Membuat Halaman Baru MENGKREASIKAN TAMPILAN WEBSITE
DI GOOGLE SITES
Hasil tampilan halaman baru:

DTS 2021 #Jadijagoandigital

E. Menambahkan konten teks MENGKREASIKAN TAMPILAN WEBSITE
dan gambar di halaman baru DI GOOGLE SITES

Anda bisa melakukan cara #Jadijagoandigital
yang sama ketika Anda
menambahkan konten
gambar dan konten teks pada
halaman “Materi Pelatihan”,
diawali dengan memilih
layouts.

DTS 2021

F. Membuat Sub Halaman Baru MENGKREASIKAN TAMPILAN WEBSITE
DI GOOGLE SITES
✔ Di dalam halaman “Materi
Pelatihan”, tambahkan sub #Jadijagoandigital
halaman yang menjadi konten
dalam Materi Pelatihan seperti
“Bahan Tayang” dan “Media
Pembelajaran” lainnya yang
berbentuk Audio Visual.

✔ Untuk menambahkan sub
halaman. Klik di menu Pages
“Materi Pelatihan”, disamping
kanan halaman web, lalu klik
icon Add Subpage (+) dibagian
bawahnya.

DTS 2021

F. Membuat Sub Halaman Baru MENGKREASIKAN TAMPILAN WEBSITE
DI GOOGLE SITES

✔ Tentukan nama sub halaman
webnya, misalkan “Bahan
Tayang” lalu klik tombol Done.

DTS 2021 #Jadijagoandigital

F. Membuat Sub Halaman Baru MENGKREASIKAN TAMPILAN WEBSITE
DI GOOGLE SITES

✔ Maka sub halaman baru “Bahan Tayang”
hasil tampilannya seperti tampak di
samping.

✔ untuk mengisi konten dari sub halaman
bahan tayang, maka kita dapat menginsert
link bahan tayang seperti Powerpoint dari
Mata Pelatihan yang sudah kita simpan di
dalam google drive.

DTS 2021 #Jadijagoandigital