Dokumen ini menjelaskan kurikulum pelajaran desain media interaktif untuk siswa, fokus pada kemampuan membangun website yang kreatif dan interaktif. Materi mencakup komunikasi data, teknologi web, dan pengembangan HTML, CSS, dan protokol internet. Tugas individu mencakup analisis dan presentasi tentang halaman web yang dianggap bagus.

1. Pendahuluan
Pelajaran :Desain Media Interaktif
Oleh : M. Ilham, S.Pd.I S.Kom
TAHUN AJARAN 2023/2024
SEMESTER GENAP

2. Deskripsi
• Pembelajaran ini dirancang agar siswa
memahami, mengetahui konsep, dan mampu
membangun website yang baik, kreatif, dan
interaktif.
• Selain itu siswa diarahkan untuk dapat berpikir
kritis dan analisis, intrapersonal dan
interpersonal, serta berorientasi pada target.

3. Kompetensi
sebuah
website
• Mengetahui dan memahami bagaimana desain
• Mampu
untuk web
• Mengetahui dan mampu
• Mengetahui dan memahami dalam
web dan desain grafis
• Mengetahui dan memahami untuk web

4. Kompetensi Mahasiswa
• Mengetahui , serta sistem grid
pada layout halaman web
• Mampu dalam mendesain
halaman web
• Mengetahui dan mampu
• Mengetahui dan mampu menggunakan
• Mengetahui konsep dan mengimplementasikan
dalam pemrograman web client-side
• Mampu
dalam web secara efektif dan efisien.

5. Pokok Bahasan
• Konsep komunikasi data, jaringan internet dan website
• Membangun konsep, konteks, dan content website.
• Good design and bad design
• Layout dan sistem grid
• Teknologi dan optimalisasi grafis untuk web
• Cascading Style Sheet
• Elemen-elemen HTML dan DOM
• Teks dan tipografi
• Warna untuk web
• Javascript dan jQuery
• Asynchronous Javascript and XML (AJAX)
• CSS media queries dan web responsif

6. Outline
• Web
• Komunikasi Client-Server
• Internet
• Teknologi HTML

7. Web (www)
• Sekumpulan halaman informasi yang disediakan
melalui jalur internet sehingga bisa diakses di
seluruh dunia selama
terkoneksi dengan jaringan internet.
• Website merupakan sebuah komponen yang
terdiri dari teks, gambar, suara animasi sehingga
menjadi media informasi yang menarik untuk
dikunjungi oleh orang lain.

8. Web (www)
• Penemu website adalah Sir Timothy John “
Tim ” Berners - Lee, sedangkanwebsite yang
tersambung dengan jaringan, pertama kali
muncul pada tahun 1991.
• untuk mempermudah tukar menukar dan
memperbarui informasi kepada sesama peneliti
di tempatnya bekerja.

9. Website
• Website Statis
• Website Dinamis
• Website Interaktif

10. Perlembangan Web
• Web 1.0
– Web 1.0 secara umum dikembangkan untuk pengaksesan
informasi dan memiliki sifat yang sedikit interaktif Sifat web
1.0 adalah read
• Web 2.0
– Salah satu aturan terutama adalah: Membangun
aplikasi yang mengeksploitasi efek jaringan untuk
mendapatkan lebih banyak lagi pengguna
aplikasi tersebut. Sifat dari web 2.0 adalah read
write. Teknologi CSS, XML, XHTML, AJAX

12. Perlembangan Web
• Web 3.0
– Konsep ini dapat diandaikan sebuah website
sebagai sebuah intelektualitas buatan
. Aplikasi online dalam
website dapat saling berinteraksi.
Kemampuan interaksi ini dimulai dengan
adanya web service.

14. Unsur Website
• Nama Domain
• Web Hosting
• Bahasa Pemrograman
• Desain Website
• Publikasi Website

15. Web Page Process

16. Konsep Client Server
• Client/server secara sederhana dapat diartikan
sebagai
atau layanan ke
komputer / device (server) lain
• Komputer / device yang menerima permintaan
data atau layanan ke komputer lain itu akan
menanggapi permintaan tersebut dan
mengirimkan data yang diminta ke komputer /
device yang meminta layanan

17. Arsitektur Client Server

18. Karakteristik Client Server
merupakan item proses (logika) terpisah yang
bekerja sama pada suatu jaringan komputer untuk mengerjakan
suatu tugas
: Menyediakan layanan terpisah yang berbeda
: Server dapat melayani beberapa client pada
saat yang sama dan mengatur pengaksesan resource
: antara client dan server merupakan
hubungan one-to-many. Client memulai komunikasi dengan
mengirim request ke server. Server menunggu permintaan dari
client. Kondisi tersebut juga memungkinkan komunikasi callback.

19. Karakteristik Client Server
: proses server dapat ditempatkan pada mesin
yang sama atau terpisah dengan proses client. Client/server akan
menyembunyikan lokasi server dari client.
: tidak tergantung pada platform
: antara client dan server berkomunikasi
dengan mekanisme pertukaran message.
: message memberitahu server apa yang akan
dikerjakan
: sistem C/S dapat dimekarkan baik vertikal maupun horisontal
: kode dan data server diatur secara terpusat, sedangkan pada
client tetap pada komputer tersendiri

20. Protocol HTTP
• Hypertext Transport Protocol (RFC 1945)
• Language of the Web
– Protocol yang digunakan untuk komunikasi antara
web browsers dan web servers
– Since 1990
• HTTP bersifat request – response:
– HTTP client (user agent misalnya) mengirimkan
permintaan (request) ke HTTP server dan server
meresponse sesuai request tersebut
• User agent: Mozilla, Netscape, Microsoft Internet
Explorer atau browser berbasis teks, Lynx atau links

21. Protocol FTP
• Sebuah protokol Internet yang berjalan di
dalam lapisan aplikasi sebagai standar untuk
pengiriman file komputer antar mesin-mesin
dalam sebuah jaringan.
• FTP sendiri merupakan singkatan dari File
Transfer Protocol. Atau dalam bahasa
Indonesianya berarti Protokol Pengiriman File
(berkas, data).

22. Protocol FTP
• Sebuah server FTP diakses menggunakan Universal
Resource Identifier (URI) dengan menggunakan
format ftp://namaserver. Klien FTP dapat
menghubungi server FTP dengan membuka URI
tersebut.
• FTP menggunakan protokol TCP (Transmission
Control Protocol) untuk komunikasi data antara FTP
klien dan FTP server. Sehingga di antara kedua
komponen tersebut akan tercipta sebuah sesi
komunikasi sebelum pengiriman data dimulai.

23. Internet
• Definisi internet adalah rangkaian atau jaringan
sejumlah komputer yang saling berhubungan.
Internet berasal dari kata
.
• Internet merupakan jaringan global yang
menghubungkan suatu jaringan (network) dengan
jaringan lainnya di seluruh dunia.
• Media yang menghubungkan bisa berupa kabel,
kanal satelit maupun frekuensi radio.

24. Internet
• Jaringan internet bekerja bekerja berdasarkan
suatu protokol (aturan).
yaitu Transmission Control Protocol
Internet Protocol adalah protokol standar yang
digunakan untuk menghubungkan jaringan-
jaringan di dalam internet sehingga data dapat
dikirim dari satu komputer ke komputer lainnya.
• Setiap komputer diberikan suatu nomor unik yang
disebut dengan alamat IP.

25. URL
• URL (Uniform Resource Locator) adalah suatu
sarana untuk menentukan informasi pada suatu
web server. URL dapat diibaratkan sebagai suatu
alamat. URL terdiri dari :
– Protokol yang digunakan oleh suatu browser untuk
mengambil informasi.
– Nama komputer (server) dimana informasi tersebut
berada.
– Jalur atau path serta nama file dari suatu informasi.
– Contoh: http://www.facebook.com/

26. Teknologi HTML
• HTML sendiri adalah sebuah Markup teks yang
digunakan untuk membuat halaman web yang nantinya
akan menampilkan informasi.
• Sebuah file dokumen yang ditulis dalam format HTML
akan dibaca dan diterjemahkan oleh web browser
• File-file yang ditulis dalam format HTML bisa disimpan
dalam ekstensi (.htm atau .html)

27. Teknologi HTML
• Tahun 1980 IBM membuat bahasa pemrograman dimana Text dan
format sebuah dokumen dijadikan satu dalam sebuah bahasa
pemrograman yang disebut GML(Generalized Markup Language)
• Pada tahun 1986 ISO membuat sebuah standardarisasi bahasa
pemrograman tersebut dan mengubah GML menjadi
SGML(Standard Generalized Markup Language).
• Kelahiran HTML pada tahun 1989 -> Caillau Tim dan Banners Lee
Robert. Mengembangkan bahasa pemrograman ini dan
mempopulerkannya dengan browser Mosaic nah mulailah HTML
semakin berkembang dan populer di tahun 1990.

29. Teknologi HTML
Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph,
hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung
peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks
disekelilingnya (wrapping).
Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk
menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita
dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini
merupakan pionir dari adanya homepage interaktif.
HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini
yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan
HTML versi 3.2.

30. Teknologi HTML
HTML versi 4 memuat banyak sekali perubahan dan
revisi dari pendahulunya. Perubahan ini terjadi di hampir
segala perintah-perintah HTML seperti table, image, link,
text, meta, imagemaps, form, dan lain- lain.
HTML5 adalah sebuah prosedur pembuatan tampilan
web baru yang merupakan penggabungan antara CSS,
HTML itu sendiri dengan Java Script. Teknologi ini mulai
diluncurkan pada tahun 2009.

32. Tugas (Individu)
• Cari halaman Web di internet yang menurut
anda bagus !!! (Screenshoot 5 halaman)
• Berikan 10 alasan mengapa web yang anda
temukan anda katakan bagus !!!
• Tugas dikerjakan dalam bentuk powerpoint(pptx)