Mapel Desain Web

Pendahuluan
MATA KULIAH :DESAIN WEB

Oleh : Denny Sagita R, S.Kom., M.Kom
TAHUN AJARAN 2013/2014

SEMESTER GANJIL
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.
Desain Web
Mata Kuliah Wajib Sistem Informasi
Kompetensi Mahasiswa
• Memahami konsep dasar dalam mendesain sebuah website
• Mengetahui dan memahami bagaimana desain web yang baik
dan buruk
• Mampu menggali kreatifitas diri dalam desain grafis untuk
web
• Mengetahui dan mampu mengimplementasikan teknologi-
teknologi dalam web
• Mengetahui dan memahami konsep tipografi dalam web dan
desain grafis
• Mengetahui dan memahami konsep warna untuk web
Desain Web
Kompetensi Mahasiswa
• Mengetahui konsep HTML dan CSS, serta sistem grid pada layout
halaman web
• Mampu mengimplementasikan CSS dalam mendesain halaman web
• Mengetahui dan mampu mengimplementasikan JavaScript
• Mengetahui dan mampu menggunakan framework JavaScript
jQuery
• Mengetahui konsep dan mengimplementasikan AJAX dalam
pemrograman web client-side
• Mampu mengoptimalkan content dan informasi dalam web secara
efektif dan efisien.
Desain Web
Koordinator Kelas
• SI Kelas A : HAFIZ | 081913596746
• SI Kelas B :
Desain Web
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.
Desain Web
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
Desain Web
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
Desain Web
Unsur Penilaian
• Absen 5%
• Tugas 15%
• Quiz 10%
• Afektifitas 5%
• UTS 30%
• UAS 35%
Desain Web
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
Desain Web
Outline
• Web
• Komunikasi Client-Server
• Internet
• Teknologi HTML
Desain Web
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.
Desain Web
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.
Desain Web
Website
• Website Statis
• Website Dinamis
• Website Interaktif
Desain Web
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
Desain Web
Desain Web
Perlembangan Web
• Web 3.0
– Konsep ini dapat diandaikan sebuah website

sebagai sebuah intelektualitas buatan ( Artificial
Intelegence ). Aplikasi online dalam website dapat
saling berinteraksi. Kemampuan interaksi ini
dimulai dengan adanya web service.
Desain Web
Desain Web
Unsur Website
• Nama Domain
• Web Hosting
• Bahasa Pemrograman
• Desain Website
• Publikasi Website
Desain Web
Web Page Process
Desain Web
Konsep Client Server
• Client/server secara sederhana dapat diartikan
sebagai kemampuan sebuah komputer / device
(client) untuk meminta data 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
Desain Web
Arsitektur Client Server
Desain Web
Karakteristik Client Server
• Client dan Server merupakan item proses (logika) terpisah yang bekerja
sama pada suatu jaringan komputer untuk mengerjakan suatu tugas
• Service : Menyediakan layanan terpisah yang berbeda
• Shared resource : Server dapat melayani beberapa client pada saat yang
sama dan mengatur pengaksesan resource
• Asymmetrical Protocol : 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.
Desain Web
Karakteristik Client Server
• Transparency Location : proses server dapat ditempatkan pada mesin yang sama
atau terpisah dengan proses client. Client/server akan menyembunyikan lokasi
server dari client.
• Mix-and-match : tidak tergantung pada platform
• Message-based-exchange : antara client dan server berkomunikasi dengan
mekanisme pertukaran message.
• Encapsulation of service : message memberitahu server apa yang akan dikerjakan
• Scalability : sistem C/S dapat dimekarkan baik vertikal maupun horisontal
• Integrity : kode dan data server diatur secara terpusat, sedangkan pada client tetap
pada komputer tersendiri
Desain Web
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
Desain Web
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).
Desain Web
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.
Desain Web
Internet
• Definisi internet adalah rangkaian atau jaringan
sejumlah komputer yang saling berhubungan.
Internet berasal dari kata interconnected-networking.
• 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.
Desain Web
Internet
• Jaringan internet bekerja bekerja berdasarkan suatu
protokol (aturan).
• TCP/IP 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.
Desain Web
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/
Desain Web
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)
Desain Web
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.
Desain Web
Desain Web
Teknologi HTML
• HTML versi 1.0
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).
• HTML versi 2.0

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

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.
Desain Web
Teknologi HTML
• HTML versi 4.0
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.
• HTML versi 5
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.
Desain Web
Ada Pertanyaan ???
Jika tidak pertanyaan, saya akhiri
Terima kasih
Desain Web
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)
• 3-5 ORANG BERUNTUNG, MINGGU DEPAN
PRESENTASI
Desain Web

Mapel Desain Web

Diunggah oleh

Informasi Dokumen

Deskripsi:

Hak Cipta

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Deskripsi:

Hak Cipta:

Mapel Desain Web

Diunggah oleh

Deskripsi:

Hak Cipta:

Pendahuluan

MATA KULIAH :DESAIN WEB

TAHUN AJARAN 2013/2014

• Selain itu mahasiswa diarahkan untuk dapat berpikir

 Berpakaian Rapi , Sopan, dan tidak menggunakan

• Website merupakan sebuah komponen yang terdiri dari

• untuk mempermudah tukar menukar dan

– Konsep ini dapat diandaikan sebuah website

• HTML versi 2.0

• HTML versi 3.0

Anda mungkin juga menyukai