Download
1 / 16
160 likes | 304 Views
Matakuliah : L0182 / Web & Animation Design Tahun : 2008. Introduction to Web & HTML Pertemuan 08. Learning Outcomes. Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : Memahami dasar-dasar dalam mendesain Web yang baik Mengetahui sintaks-sintaks dasar pada HTML. Outline Materi.
E N D
Matakuliah : L0182 / Web & Animation Design Tahun : 2008 Introduction to Web & HTMLPertemuan 08
Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : • Memahami dasar-dasar dalam mendesain Web yang baik • Mengetahui sintaks-sintaks dasar pada HTML
Outline Materi • User Interface • Delapan Aturan Emas (Eight Golden Rules) • World Wide Web • Top Ten Mistakes in Web Design • Keuntungan Menggunakan Web • HTML • HTML Tags • HTML Tag Attributes
User Interface • UserInterface adalah penghubung antara manusia dan alat atau sistem yang memungkinkan manusia untuk berinteraksi dengan alat atau sistem tersebut. • User interface menyediakan alat untuk : • Input, memungkinkan user untuk memanipulasi sistem • Output, memungkinkan sistem untuk memproduksi efek dari manipulasi yang dilakukan oleh user • Saat ini, tipe-tipe user interface berikut adalah yang paling umum : • Graphical User Interface (GUI) menerima input melalui suatu alat seperti keyboard komputer dan mouse dan menyediakan tampilan grafis yang komunikatif pada monitor. • Web User Interface (WUI) menerima input dan menyediakan tampilan dengan men-generate halaman-halaman web yang ditransmisikan melalui Internet dan ditampilkan melalui web browser
Rancangan Interaksi Yang Baik • Untuk mendapatkan kegunaan terbaik dari suatu aplikasi, sangat penting untuk memiliki interface yang dirancang dengan baik. • “Delapan Aturan Emas Perancangan Interface” dari Ben Shneiderman : • Berusaha untuk konsisten • Memungkinkan user untuk menggunakan shortcut • Memberikan umpan balik yang informatif • Merancang dialog yang memberikan penutupan • Menawarkan penanganan kesalahan yang sederhana • Memungkinkan pembalikan aksi yang mudah • Mendukung internal locus of control • Mengurangi beban ingatan jangka pendek
Alat Perancangan • CAI software : Macromedia Authorware, IconAuthor, Quest. • Multimedia construction tools : HyperCard, Macromedia Director, Macromedia Flash. • Slide presentation software : Microsoft PowerPoint. • Visual programming tools : Microsoft Visual Basic, Visual Studio .NET), Borland Delphi. • Web design tools : Macromedia Dreamweaver, Macromedia Fireworks.
World Wide Web • World Wide Web (sering disingkat sebagai Web) adalah suatu sistem yang menghubungkan dokumen hypertext yang diakses melalui internet. • Dengan suatu web browser, seorang user melihat halaman web yang mungkin berisi text, image, video, dan multimedia lainnya dan dihubungkan menggunakan hyperlinks.
Top Ten Mistakes in Web Design • Jakob Nielsen's Top Ten Mistakes in Web Design : • Menggunakan Frame • Penggunaan teknologi baru yang sembarangan • Scrolling Text, Marquees, dan Animasi yang terus berjalan • URL yang kompleks • Halaman yatim • Halaman yang terlalu panjang • Kurangnya dukungan navigasi • Warna link yang tidak standar • Informasi yang ketinggalan • Waktu download terlalu lama
Keuntungan Penggunaan Web • Audiens yang umum • Dioperasikan 24 jam, 7 hari seminggu • Relatif murah • Mengiklankan produk • Mendistribusikan katalog produk • Online surveys • Pengumuman • Online discussion forums • Mendapatkan feedback dari pelanggan • Distribusi Informasi yang cepat • Multimedia • Kemampuan melakukan pemformatan
HTML • HyperText Markup Language (HTML) adalah bahasa markup yang digunakan untuk menstrukturkan text dan dokumen multimedia dan untuk mengatur hypertext links antar dokumen, sangat banyak digunakan pada World Wide Web. • Halaman Web dibangun dengan HTML tags (codes)yang disatukan dalam text. • HTML mendefinisikan tampilan halaman, tulisan dan elemen grafis. • Untuk membuat suatu halaman interaktif, programming code disatukan dalam suatu halaman HTML. Contoh : JavaScript dan VBScript
HTML Tags • HTML Tagsadalah perintah yang ditulis diantar tanda lebih kecil (<) dan lebih besar (>), yang juga dikenal sebagai angle brackets, yang mengindikasikan bagaimana browser akan menampilkan text.
Basic HTML Tags • Catatan : browser akan mengenali HTML code walaupun ditulis dengan huruf kapital atau huruf kecil atau campuran keduanya.
Basic HTML Tags (cont..) • Headings • <h1>This is a heading</h1> • Paragraphs • <p>This is a paragraph</p> • Line breaks • <p>This<br>is a paragraph<br>with line breaks</p> • <!-- This is a comment -->
HTML Tag Attributes • Attributes menyediakan informasi tambahan untuk suatu elemen HTML. • Attributes selalu dispesifikasikan pada tag awal dari suatu elemen HTML. • Nilai Attribute selalu ditampilkan dalam quotes. Double style quotes adalah yang paling umum, tetapi single style quotes juga diperbolehkan. Contoh: name="value". • Contoh : • <h1 align="center"> has additional information about the alignment.</h1> • <body bgcolor="yellow"> has additional information about the background color.</body> • <table border="1"> has additional information about the border around the table.</table>
Nesting Tags • Dalam beberapa kasus, memungkinkan untuk memodifikasi isi halaman dengan lebih dari satu tag. • Ada dua hal yang perlu diingat : • Tidak semua tag dapat mengandung jenis tag yang lain. • Urutan adalah penting. Kapanpun suatu tag penutup digunakan harus berkorespondensi pada tag pembuka terakhir. • Contoh: • <H1>Web<I>Animation</I></H1> correct • <H1>Web<I>Animation</H1></I> incorrect
