2382133.ppt

1. Pendahuluan
MATA KULIAH :DESAIN WEB
Oleh : Denny Sagita R, S.Kom., M.Kom
TAHUN AJARAN 2013/2014
SEMESTER GANJIL

2. Desain Web
Mata Kuliah Wajib Sistem Informasi
Deskripsi Mata Kuliah
• Matakuliah ini dirancang agar mahasiswa
memahami, mengetahui konsep, dan mampu
membangun website yang baik, kreatif, dan
interaktif.
• Selain itu mahasiswa diarahkan untuk dapat
berpikir kritis dan analisis, intrapersonal dan
interpersonal, serta berorientasi pada target.

3. Desain Web
Mata Kuliah Wajib Sistem Informasi
Kompetensi Mahasiswa
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. Desain Web
Mata Kuliah Wajib Sistem Informasi
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. Desain Web
Mata Kuliah Wajib Sistem Informasi
Koordinator Kelas
• SI Kelas A : HAFIZ | 081913596746
• SI Kelas B :

6. Desain Web
Mata Kuliah Wajib Sistem Informasi
Strategi Perkuliahan
• Kuliah akan dilakukan dengan menggunakan cara
ceramah, latihan, tugas-tugas mandiri, tanya–jawab,
diskusi, studi kasus, serta praktek membangun
website.
• Untuk proyek akhir mahasiswa diwajibkan untuk
bekerja dalam tim untuk membuat proyek desain web
yang baik, kreatif, dan interaktif.
• Proyek tersebut akan dijadikan proyek akhir mata
kuliah yang dipresentasikan di akhir perkuliahan
sebagai bahan untuk evaluasi kompetensi.

7. Desain Web
Mata Kuliah Wajib Sistem Informasi
Kontrak Kuliah
 Kehadiran Mahasiswa 80% dari kehadiran dosen
 Perkuliahan dapat dilaksanakan di kelas maupun di
laboratorium
 Jika dosen terlambat lebih dari 40 menit dan tidak ada
konfirmasi, mahasiswa bisa meninggalkan kelas
 Plagiarisme Tugas, UTS, dan UAS dikenakan sanksi penilaian

8. Desain Web
Mata Kuliah Wajib Sistem Informasi
Kontrak Kuliah
 Berpakaian Rapi , Sopan, dan tidak menggunakan
sandal
 Tidak ada tugas atau ujian remidi untuk MK IMK
 Surat sakit(surat dokter)/ Ijin, maksimal diberikan
1 minggu setelah sakit atau ijin berlangsung
 Ponsel : Silent Mode

9. Desain Web
Mata Kuliah Wajib Sistem Informasi
Unsur Penilaian
• Absen 5%
• Tugas 15%
• Quiz 10%
• Afektifitas 5%
• UTS 30%
• UAS 35%

10. Desain Web
Mata Kuliah Wajib Sistem Informasi
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

11. Desain Web
Mata Kuliah Wajib Sistem Informasi
Outline
• Web
• Komunikasi Client-Server
• Internet
• Teknologi HTML

12. Desain Web
Mata Kuliah Wajib Sistem Informasi
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.

13. Desain Web
Mata Kuliah Wajib Sistem Informasi
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.

14. Desain Web
Mata Kuliah Wajib Sistem Informasi
Website
• Website Statis
• Website Dinamis
• Website Interaktif

15. Desain Web
Mata Kuliah Wajib Sistem Informasi
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

16. Desain Web
Mata Kuliah Wajib Sistem Informasi

17. Desain Web
Mata Kuliah Wajib Sistem Informasi
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.

18. Desain Web
Mata Kuliah Wajib Sistem Informasi

19. Desain Web
Mata Kuliah Wajib Sistem Informasi
Unsur Website
• Nama Domain
• Web Hosting
• Bahasa Pemrograman
• Desain Website
• Publikasi Website

20. Desain Web
Mata Kuliah Wajib Sistem Informasi
Web Page Process

21. Desain Web
Mata Kuliah Wajib Sistem Informasi
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

22. Desain Web
Mata Kuliah Wajib Sistem Informasi
Arsitektur Client Server

23. Desain Web
Mata Kuliah Wajib Sistem Informasi
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.

24. Desain Web
Mata Kuliah Wajib Sistem Informasi
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

25. Desain Web
Mata Kuliah Wajib Sistem Informasi
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

26. Desain Web
Mata Kuliah Wajib Sistem Informasi
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).

27. Desain Web
Mata Kuliah Wajib Sistem Informasi
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.

28. Desain Web
Mata Kuliah Wajib Sistem Informasi
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.

29. Desain Web
Mata Kuliah Wajib Sistem Informasi
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.

30. Desain Web
Mata Kuliah Wajib Sistem Informasi
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/

31. Desain Web
Mata Kuliah Wajib Sistem Informasi
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)

32. Desain Web
Mata Kuliah Wajib Sistem Informasi
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.

33. Desain Web
Mata Kuliah Wajib Sistem Informasi

34. Desain Web
Mata Kuliah Wajib Sistem Informasi
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.

35. Desain Web
Mata Kuliah Wajib Sistem Informasi
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.

36. Desain Web
Mata Kuliah Wajib Sistem Informasi

37. Desain Web
Mata Kuliah Wajib Sistem Informasi
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)