Transcript
Deddy AmrandÂ
Modul PembuatanClassroom Website
di Google Site
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014
1
Why Google Site?
Here are some of the pertinent reasons why you should consider using Google sites with your
students :
Google site is free
It is very easy to use and has a simple and student friendly interface
Anyone above 13 can join in and add contentto it ( provided you give them access )
A site can be created for a class within a couple of minutes using templates for different
pages and without the need for advanced technology knowledge
Google Site also offers you control over who can have access tothe pages and who can
share materials
It can improve students digital literacy skills
It can open up your classroom and make it a collaborative learning environment
(quoted from
http://www.educatorstechnology.com
)
Fast
. Fast to learn. Fast to setup and deploy. Fast to edit.
Easy to learn
.
Simple to Setup.
Editing On Line.
Free.
(quoted from
http://www.chipp.com/google-sites-faq
)
Large storagecapacity
(15GB)on Google
Website isautomaticallyincluded in Google search engine
Workshop Pembuatan Classroom Website
Deddy Amrand
2
Ways Teachers canUse Google Sites in their Classroom
Here are some of the tips to help you get started using Google Sites in your Classroom :
•
Create a webpage forthe class where to include course materials and rich content
including videos, images, slides, and audio recordings
•
Use it for posting homework, assignments, and class events
•
You can also use it as a discussion board where every student can have a say
•
Create a page for posting announcements , class events, reading materials, classroom
rules, and many more
•
Use it as a wiki and let your students collaboratively work on their assignments and edit
content
•
Use the File Cabinet page to upload documents, PDFs andother materials to share with
your students
•
You can also create a private page where to share information with parents like curriculum
resources
•
Embed a calendar to keep track of your deadlines or Google Spreadsheet to keep track of
your research
Ways Students Can Use Google Sites
Here are some ideas on how students can useGoogle Sites :
•
They can use it to create digital portfolios to feature their work and achievements
•
Create and manage to-do lists for their assignments and classroom activities
•
Collaborate on group projects
•
They can use it to present their findings on a particular research subject. They can include
docs they have created, videos, links and many more
•
Students can use it to contribute in knowledge building inside the classroom and to help
with course materials
(
Source
: http://www.educatorstechnology.com/2013/01/teachers-guide-on-use-of-google-
sites.html)
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014
3
BAGIAN 1–MENYIAPKAN WEBSITE
Membuat website
1.
Sign in
pada
sites.google.com
dengan akun gmail.
2.Kliktombol
Create
.
3.
Select a template to use.
Untuktahap awal,sebaiknya memilih
blanktemplate
.
4.
Beri nama situs anda
(nantinya bisa diganti)
5.
MerubahURL.
MeskipunURLutama tidak bisa diganti, anda masih dapat mengganti
bagianakhirnya:
o
https://sites.google.com/site/___
Hal-hal yang perlu diperhatikan saat menggantiURL:
o
hanya bisa menggunakaA-Z, a-z, 0-9
o
tidak bisa sama denganURLyang sudah ada atauGmail username (kecuali
username anda sendiri)
6.
Memilihtema.
Sebuah tema secara otomatismembuat gambar latarbelakang, font style,
danfont colorssitus anda.Kalau anda memilih “blank”, templateyang dipilih akan men-
setup elemen-elemen di atas.Setelah situs selesai dibuat, tema masih bisa diganti atau
ditambahkan.
Workshop Pembuatan Classroom Website
Deddy Amrand
4
Opsitambahan:
o
Site description
(optional)–Tuliskan deskripsi singkat mengenai situs anda agar
memudahkan orang menemukannya di internet.
7.Isikan kode.
8.Klik tombol
Create
.
Nah, kini website anda sudah selesai dibuat.Anda bisa mulai memasukkan tulisan, gambar, video,
dll.
Mengeditwebsite
1.Untuk mengedit website,klik
Edit Page
:
2.Setelah itu akan muncul
Edit toolbar,
yangmenyediakan bermacam tool untuk mengedit site.
Membuatlink
1.
Highlight
teks yang andaubah menjadi sebuahlink,kemudian klik tombol
Link
.
2.Sebuah jendela akan muncul, klik pada salah satu page hendak diberi link dalam
Site map
3.
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014
5
Linkbisa diambil dari:
(a)Halaman yang sudah ada dalam website (pilih
Site pages
)
(b)Halaman yang baru akan dibuat(klik
Create newpage
)
(c)Alamat sebuah website (klik
Web address
)
Membuat halaman baru
1.klik “
New Page
”
2.Lalu, isi bagian “
Name your page
”, “
Select a template to use
”, dan “
Set a location.”
3.Setelah semua OK, klik
“Create”
Workshop Pembuatan Classroom Website
Deddy Amrand
6
Memulai menulis informasi, tulisan atauartikel
Oke, situs Anda sudah tercipta. Halaman selanjutnya yang ditampilkan oleh Google Sites
adalah halaman pertama situs Anda. Halaman pertama ini dikenal pula dengan istilah
homepage
(halaman pertama atau halaman depan).Apabila memilih blank templatepada
halaman sebelumnya, Anda akan melihat tampilan halaman pertama yang polos. Hanya
ada judul situs dan kolom navigasi di sebelah kiri.
(a)Untukmengisihalaman depan itu dengan teks atau hal lainnya
:
1.klik tomboledit page.
Tunggu
loading editor
-nya
selesai. Setelah itu, silahkan
menulis.
(b)Untukmemasukkan
gambar ke halaman tersebut:
1.klik menu
Insert
,lalu pilih
Image
.
Google akan menampilkan kotak dialog yang menanyakan dari mana sumber gambar yang ingin
ditampilkan.
Apabila ingin mengunggah (upload) dari komputer:
1.pilih
uploaded images
,
2.lalu klik tombol
browse
.
3.Pilih file yang ada di komputer Anda lalu klik
open
.
4.Di kotak dialog, klik
OK
. Gambar yang Anda pilih akan diunggah laluditambahkan ke dalam
halaman.
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014
7
Jika Anda inginmengambil gambar dari internet, cukup salin alamat link gambar tersebut lalu pilih
Web address. Masukkan alamat link gambar yang tadi Anda salin. Klik Ok, maka gambar
ditambahkan ke dalam halaman. Jika semua perubahan sudah selesai, klik Save. Jadilah halaman
depan situs Anda.
(c)Untuk memasukkan Video dari Youtube
1.klik tombol
Edit page
.
2.Klik “
Insert
”, lalu pilih “
Youtube
”
Workshop Pembuatan Classroom Website
Deddy Amrand
8
3.Setelah kotak dialog muncul:
(d)Untuk menambahkan halaman baru
1.Klik tombol
create page
.
2.Lakukan pengeditan seperti yang dijelaskan di atas.
3.Setelah segalanya selesai, klik lagi tombol
save
.
4.Prosedur yang sama berlaku setiap pembuatan halaman baru.
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014Â
9
Mengubahlayout, tema,warna, ataufonts
(a)Site layout
1.Klik icon
Gear
icondi sudut kanan atas.
2.Pilih
Edit site layout
.
3.Setelah itu di bagian atas akan muncul sebuah toolbar yang menunjukkan elemen-elemen
dalam website.Setiap elemen bisa diaktif/non-aktifkan dengan mengkliknya.
4.Anda bisa dengan mudah mengubahsetiap elemen tersebut.Untuk melihat mana yang
bisa diedit,arahkan mouse di atasnya;bagian yang dapat diedit akan ter-highlightdengan
warnablue.
5.Untuk mengubah sebuah elemen,pertama-tama klik sebuah elemen.Yang bisa dilakukan
pada setiap elemen adalah:
o
Header
:mengubah tinggi danalignment,dan menambahkan sebuahlogo.
o
Horizontal navigation bar
:mengubah stylenavigation bardi bagian atas (tepat di
bawah header) dan menentukan halaman apa saja yang bisa diakses dari situ.
o
Sidebar
:Menentukan namasidebar,pengaturannya,dan link-link yangtercakup.
o
Footer
:menambahkan danmenformatteks padafooter.
o
Site width
:mengubahlebar website.
Workshop Pembuatan Classroom Website
Deddy Amrand
10
(b)Site themes
1.Pilih
Manage site
dari menu
More action
.
2.Klik
Themes, Colors, and Fonts
padasidebarkiri.
3.Pilih temayang disukai.Perubahannya bisa langsung dilihat pada area
Preview
area.
4.Klik"
Save changes
."
(c)Site colors and fonts
1.Pilih
Manage site
dari menu
More action
.
2.Klik
Themes, Colors, and Fonts
padasidebarkiri.
3.Padascrolling box,pilihbagianyangingindimodifikasi:
o
Entire page
o
Site header
o
Content area
o
Content area gadgets
o
Sidebar gadgets
o
Horizontal navigation
4.Setelah selesai, klik "
Save changes
."
Menata “sidebar navigation”
1.
Pastikan halaman-halaman yang akan ditata telah dibuat sebelumnya.
2.
Klik “
More Actions
” pada sudut kanan atas.
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014
11
3.
Klik “
Edit Site Layout
”
4.
Klik tanda
+
untuk menambahkansebuah
sidebar navigation
5.Pada dialog box, pilih
“
Navigation
” (klik add)
6.Di sebelah kiri akan muncul gambar seperti dibawah. Klik pada “
Navigation
”
Workshop Pembuatan Classroom Website
Deddy Amrand
12
Catatan
: Selain Navigation, gadget lain yang bisa digunakan adalah:
7.Setelah itu akan muncul kotak dialog “
Configure Navigation
”
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014
13
BAGIAN 2–Menambahkan Fitur
-
Fitur
KhususuntukClassroom Web
Membuat Form
Form dapat dibuat untuk berbagai tujuan, misalnya:
1.Online video feedback
Workshop Pembuatan Classroom Website
Deddy Amrand
14
2.
Visitor’s Comment
3.
Online Quiz
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014
15
Step 1–Masuk ke Google Drive
1.Ketik
https://sites.google.com
ke dalam url address di browser anda (Mozilla atau
Internet Explorer), lalu Enter.Jika anda belum log in ke Google account anda, anda harus
log in dulu.
2.Ikuti langkah 2 dan 3 seperti pada gambar di bawah:
3.Setelah itu, anda akan masuk ke dalam
Google Drive
yang merupakan tempat
penyimpanan online berkapasitas 15GB. Di sini anda bisa membuatdan menyimpanfile-
file documents, spreadsheets, forms, slides, dan drawing yang bisa ditampilkan ke
website anda.
Workshop Pembuatan Classroom Website
Deddy Amrand
16
Step2–Buat Form dalamGoogle Drive
(1)Pertama-tama, buka sebuah form kosong
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014
17
(2)Sebuah Form kosong akan siap dibuat. Caramembuatnya:
1.Beri nama
form
, deskripsi, dan buat item pertama
2.Untuk membuat item berikutnya, klik
3.Jika ingin merubah tampilan, klik
Change theme
4.Untuk kembali ke
Google Drive
, klik
Workshop Pembuatan Classroom Website
Deddy Amrand
18
Memasukkan Form ke dalam Web page
(a)Masuk ke halaman yang diinginkan. Jika belum ada, buat dulu (lihat halaman 4)
(b)Setelah halaman tersedia, maka sudah Form dapat dimasukkan.Caranya:
1.Masuk ke mode Edit, dengan cara mengklik icon “
Edit the page
”
2.Langkah berikutnya:
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014
19
3.Setelah muncul kotak dialog, pilih
file Form
yang telah dibuat sebelumnya, lalu “
Select
”
Workshop Pembuatan Classroom Website
Deddy Amrand
20
4.Pada kolom “
Properties
”, lakukan pengaturan sesuai kebutuhan, lalu klik “
Save
”
5.Lalu Klik “
Save
”lagi
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014Â
21
6.Lakukan langkah yang sama untuk memasukkan
File Spreadsheet
yang menampung semua
isian Form.
Workshop Pembuatan Classroom Website
Deddy Amrand
22
Membuat Online Discussion Forum
Step 1–MembuatGroup
1.Masuk ke
https://groups.google.com
2.Klik
Create Group
3.Berinama group dan deskripsinya (group email akan terisi otomatis)
4.Setelah itu, klik
Create.
5.Isikan
captcha
6.Setelah itu, tampilan berikut akan muncul:
7.Beri tanda
centang
pada
Google profile
, laluklik
Save my changes
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014
23
Step 2–Invite Members
1.Klik
Manage
2.Akan muncul tampilan berikut:
3.Klik
Invite member
,
4.Isikan
alamat gmail
yang akan diundang (maksimal 10 alamat untuk sekali mengundang, setiap
alamat dipisahkan oleh tanda koma)
5.Tuliskan
messagenya
6.Klik
Send invites
7.Isikan
capctha,
lalu
OK.
Workshop Pembuatan Classroom Website
Deddy Amrand
24
MengintegrasikanGoogle Group ke dalam Website
1.Sediakan sebuah page kosong (caranya:lihat halaman 13) untuk Online discussion.
2.Setelah page tersedia,masuk pada page tersebut, lalu klik
Edit page
3.Kemudian, ikuti langkah berikut:
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014Â
25
4.Setelah kotakdialogmuncul, ikuti langkah berikut:
Contoh URL adalah sbb:
5.Tampilan berikut akanmuncul,lakukan pengaturan centre alignment, lalu klik
Save
:
Workshop Pembuatan Classroom Website
Deddy Amrand
26
Agar mudah diakses pengguna, jangan lupa untuk memasukkan link ke halaman
Online
discussion
ini ke dalam
Sidebar Navigation
(lihat caranya pada halaman 7-9).
Memulai dan Mengelola Online Group Discussion
1.Masuk pada halaman Online Forum, laluKlik
NEW TOPIC
2.Isikan subject diskusi, tulis message, lalu klik
POST
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014
27
Membuat “Send a file” Form
“Send a file” formberguna sebagai tempat mengirimkan file (pdf, doc, xlx, dsb) kepada anda.
Semua file yang terkirim melalui form ini akan ditampung dalam sebuah akun email. Sebaiknya
anda membuat sebuah akun email khusus untuk keperluan ini, jangan digabung dengan email
umum yang sudah anda punyai.
Salah satu kelebihan fasilitas ini adalah: bila file berhasil terkirim, maka sebuah email notifikasi
akan otomatis dikirim ke alamat email pengirim file tsb. Dengan demikian, pengirim memperoleh
kepastian sampai tidaknya file yang dikirimnya.
Step 1–Membuat Form untuk “Send a file”
1.Masuk ke
http://allforms.mailjol.net/
2.Register “Free account.”
3.Cek email anda, dan lakukan konfirmasi/aktivasi akun.
4.Log in di
http://allforms.mailjol.net/login.php
5.Setelah masuk, pilih
Create Form (basic),
klik
<>
6.Ikuti langkah-langkah pembuatan secara teliti.
7.Penting: pada bagian
Email Question
, pilih
Email.
8.Pada
Thank you email
, pilih
Yes,
lalu isi data yang diminta.
9.Terakhir, klik
Save
.
10.
Jangan lupa mencatat
url form
yang sudah dibuat. Misalnya:
Workshop Pembuatan Classroom Website
Deddy Amrand
28
Mengintegrasikan
Form “Send a file”
ke dalamGoogle Site
1.Masuk keGoogle Sites, laluklik
Editpage
.
2.Klik"
Insert
" menu,pilih"
MoreGadgets
".
3.Pada popup windows"
Setup your gadget
",klik "
Add gadget by URL
".
Workshop Pembuatan Classroom Website
Prodi Bhs. Inggris, November 2014
29
4.Pada kolom “Add your form's URL”masukan
url form
ditambah
?googlesites
.
Misalnya, jika
url form
anda adalah sbb:
http://free.allforms.mailjol.net/u/8303f6cb.php
Maka,tuliskan:
http://free.allforms.mailjol.net/u/8303f6cb.php
?googlesites
5.Lakukan pengaturan seperti di bawah ini:
6.Terakhir,klik
Save
.
