MATA KULIAH :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.

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

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.

Koordinator Kelas SI Kelas A : HAFIZ | 081913596746 SI Kelas B :

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.

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

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

Unsur Penilaian Absen 5% Tugas 15% Quiz 10% Afektifitas 5% UTS 30% UAS 35%

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

Outline Web Komunikasi Client-Server Internet Teknologi HTML

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. website adalah kumpulan dari halaman - halaman situs, yang terangkum dalam sebuah domain atau subdomain, yang tempatnya berada di dalamWorld Wide Web ( WWW ) di dalam Internet. Sebuah halaman web biasanya berupa dokumen yang ditulis dalam format HTML ( Hyper Text Markup Language ), yang selalu bisa diakses melalui HTTP, yaitu sebuah protokol yang menyampaikan informasi dari server website untuk ditampilkan kepada para pemakai melalui web browser. Semua publikasi dari website tersebut dapat membentuk sebuah jaringan informasi yang sangat besar.

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. website adalah kumpulan dari halaman - halaman situs, yang terangkum dalam sebuah domain atau subdomain, yang tempatnya berada di dalamWorld Wide Web ( WWW ) di dalam Internet. Sebuah halaman web biasanya berupa dokumen yang ditulis dalam format HTML ( Hyper Text Markup Language ), yang selalu bisa diakses melalui HTTP, yaitu sebuah protokol yang menyampaikan informasi dari server website untuk ditampilkan kepada para pemakai melalui web browser. Semua publikasi dari website tersebut dapat membentuk sebuah jaringan informasi yang sangat besar.

Website Website Statis Website Dinamis Website Interaktif

Perlembangan Web Web 1.0 Web 2.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

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.

Unsur Website Nama Domain Web Hosting Bahasa Pemrograman Desain Website Publikasi Website

Web Page Process

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

Arsitektur Client Server

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.

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

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

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).

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.

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.

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.

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/

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)

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.

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.

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.

Jika tidak pertanyaan, saya akhiri Ada Pertanyaan ??? Jika tidak pertanyaan, saya akhiri Terima kasih

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