RENCANA PROGRATVI DAN KEGIATAN PEMBELAJARAN SEMESTER (RPKPS)
NAMA MATAKULIAH Pemrograman Web Dasar
DISUSUN OLEH: Suprayogi, S.Kom Feri Agustina,S. Kom
FAKULTAS ILMU KOMPUTER UNIVERSITAS DIAN NUSWANTORO DESEMBER
2OO8
HALAMAN PENGESAHAN
Judul
Matakuliah
: pemrograman Web Dasar
Penyusun Nama NPP
Pangkat/Golongan
:
:Suprayogi,S.Kom
:'.
sekarang Nama . FeriAgustina,S.Kom NPP :PangkaUGolongan Jabatan sekarang Jabatan
:
: :
Semarang, 25 Agustus 200g Mengetahui: Ketua Program Studi
Amiq Fahmi,
NPP.
M.Kom
Penyusun,
Supravoqi,S.Kom NPP. O686.1t.tgg8l+g Dekan
Fakultas llmu Komputer
Edy Mulvanto, S.Si. M.Kom NPP. 0686.11.1993.040
FeriAqustina.S.Kom NPP.
RENCANA PROGRAM DAN KEGIATAN PEMBELAJARAN SEMESTER (RPKPS)
NAMA
MATAKULIAH
A. KODE/SKS B. SEMESTER
:
Pemrograman Web Dasar
. :
t4(2-2) -/Ganjil
: Wajib C. STATUS MATAKULIAH : Dasar Pemrograman PRASYARAT KULIAH MATA D. E. DESKRIPSI SINGKAT MATAKULIAH : Mempelajari pembangunan
F.
halaman web dimulai dari perencanaan web, pengaturan desain tampilan, memisahkan antara content web dan format tampilan (CSS), menjadikan web interaktif (Javascript), dan memasang web pada suatu server hosting.
SILABUS MATAKULIAH 1. Pengenalan Web Standard . Sekilas sejarah lnternet,web, dan evolusi web standard. . Bagaimana internet bekerja . Model web standard CSS,HTML,JavaScript. 2. Proses pembuatan Website . Site definition and planning
r r . . .
Site design Site construction Site marketing
.
Navigation
lnformationarchitecture
Tracking,evaluation, maintenance 3. Desain lnterface . Web page design dibandingkan desain konvensional(desain cetak) . Make your web pages freestanding o User - Centered design r Accesibilty 4. Site Design . Organization lnformation . Site structure . Site design themes . Site elements 5. Page design o Visual Hierarchy . Consistency ' Page dimensions
. Page length . Design grids o Page headers & footers . Page layout r Frames . General design considerations . Cross-platformissues ' Accesibility 6. Typography . Characteristics of type on the Web ". Content structure and visual logic Cascading style sheets
.
. r r .
Legibility
o c o o o o o
Alignment Line length White space Typefaces Type size Case
Emphasis Consistency
Cross-platformissues Accessibility Type graphics
GRAPHICS r Characteristics of Web graphics . Color displays
r . .
.
r . .
.
"Browser-safe"colors Dithering
Screen resolution Gamma
Graphics and network bandwidth Graphic file formats . GIF files . JPEG graphics . PNG graphics . lmaging strategies lmages on the screen . The screen versus printed color artwork . Complex illustrations or photographs . Diagrams for the computer screen HTML and graphics Accessibility
8. MULTIMEDIA . Applications for multimedia . Web multimedia strategies o Audio only o Slide shows o Video o Animation . Preparing multimedia o Processing o Delivery . Design and multimedia . Accessibility 9. Dasar-dasar HTML Dasar HTML Head Pemilihan doctype untuk dokumen HTML
r . r
10. HTML Body
. r
Heading,paragraphbreaklineetc. List
. . . . . . ,I1.
lmage Link Table Form
Elemen Div ,Span menu navigasi
CSS
o . . r r o . r r . . . .
Pengertian CSS Keuntungan penggunaan CSS Aturan Penulisan Macam-macam Selector Tag HTML,Class,lD,kontekstual Specificity
Pseudoclass PseudoElement CSS Properties (Font,color&background, text,list) table Form Float & clearing
CSS Static & Relative Positioning CSS Absloute & Fixed Positioning
12. Javascript
o . o . . r
PengertianJavaScript Tipedata,variabel,Operator Konstruksi dasar Sequence,pencabangan,pengulangan Fungsi , user defined function Event-event javascript: IVouseover,Click,Focus,blur,change,select,submit,load,unload Object, object internal javascript (string,array,math,date)
7.
TUJUAN PEMBELAJARAN
agar mahasiswa mempunyai dasar pengetahuan yang kuat dalam pembuatan suatu website dan menggunakan standard HTML sehingga website yang dibuat dapat berjalan pada banyak browser. ,
. . .
8.
HASIL (OUTCOME) PEMBELAJARAN: memahami konsep : konsep-kunsep dalam desain web meliputi perencanaan web, warna,
typography.
memahami pemakaian tag{ag HTML,CSS,JavaScript. mengaplikasikan konsep dan dapat menggabungkan pemakaian HTML,CSS,JavaScript. sehingga dapat membuat suatu WebSite yang baik dan standard yang dapat berjalan pada banyak browser.
9.
METODE PEMBELAJARAN DAN ALOKASI WAKTU
Kegiatan didalam kelas (4 SKS x 14 minggu): a. Penjelasan kuliah = 100 menit b. Kuliah ceramah = 650 menit c. Diskusi kelompok & kelas = 650 menit d. Presentasi tugas kelompok = 200 menit e. Praktikum = 1400 menit f. Ujian mid/akhir teori/praktek = 200 menit
Total
=
3200 menit /
54 jam ( 27 pertemuan)
Yang dimaksud dengan jam di sini adalah jam pelajaran (50 menit) sesuai dengan definisi SKS. Selain itu, karena 1 SKS mengandung kegiataii untuk tirgas rnandiri yang tereneana, maka diberikan pula kegiatan berikut: Tugas terencana di luar kelas (3 SKS x 16 minggu): a. Tugas lndividu = 16 jam b. Tugas kelompok = 16 jam c. Studi mandiri = 16 iam total = 48 jam
10. ATURAN PERKULIAHAN Peserta kuliah wajib mengikuti perkuliahan minimal 7SYo darijumlah pertemuan dalam satu semester sebagai persyaratan untuk dapat mengikuti ujian akhir. Mahasiswa yang tidak memenuhl batas kehadiran minimal mengikuti ketentuan yang berlaku di akademik.
1. RENCANA KEGIATAN
P EMBELAJARAN MINGG UAN (RKE M)
Topik (Pokok Bahasan)
Minggu
Metode Pembelajaran
ke
. . .
. .
. r
2.
Ceramah
Pokok Bahasan : Web Standard Apa itu Web Standard? Sejarah lnternet,web, dan evolusi web standard Bagaimana lnternet bekerja o Model web standard CSS,HTML,Javascrtpt Praktikum . HTML Dasar
1
a
Head Doctype HTML Body
Heading,Paragraf,BreakLine Contoh sederhana penqqunaan HTML,CSS,JavaScript Pokok bahasan HTML Body
. . . .
l\lenggunakan media LCD, papan tulis, notebook dan lnfokus
List
a a
Ceramah Menggunakan
lmage
media LCD,
Link
papan tulis, notebook dan
Table
lnfokus Pokok bahasan HTML Body
J.
. .
. E
Div Span
Pokok Bahasan CSS . Pengenalan CSS . aturan penulisan Macam-macam Selector Taq HTML,Class.lD,kontekstual Pokok bahasan CSS . Specificity . Pseudoclass . PseudoElement . CSS Properties (Font,color&background, text,list) . Table
4
a
Ceramah Menggunakan
Form
Pokok bahasan CSS
media LCD, papan tulis, notebook dan
lnfokus
. .
Ceramah Menggunakan media LCD, papan tulis, notebook dan
lnfokus
.
Ceramah
CSS Float & cleartng CSS Static & Relative Positioning CSS Absolute & Fixed Positioning
a a a
,
Menggunakan
media LCD, papan tuiis, notebook dan
lnfokus Ceramah Menggunakan
Pokok Bahasan : Proses pembuatan Website . Site definition and planning
6
7
r
. r . . . .
r
Navigation
Pokok Bahasan : Site Design . Organizationlnformation . Site structure . Site design themes r Site elements Praktikum perancanqan website 8
I
10
UTS Page design
. . r r . . r .
Visual Hierarchy Consistency Page dimensions Page length Design grids Page headers & footers Page layout
papan tulis, notebook dan
lnfokus Kertaslbuku untuk desain
. .
Ceramah Menggunakan
media LCD, papan tulis, notebook dan
.
lnfokus Kertas/buku untuk desain
Ceramah Menggunakan media LCD, papan tulis, notebook dan
lnfokus Kertas/buku untuk desain
Frames
General design considerations . Cross-platformissues . Accesibility Praktikum menerapkan page desain untuk masing-masing halaman vano telah dirancanq sebelumnYa Poko Bahasan : TyPograPhY . Characteristics of type on the Web . Content structure and visual logic . Cascading style sheets
.
media LCD,
lnformationarchitecture
Site design Site construction Site marketing Tracking,evaluation, maintenance Praktikum perencanaan pembuatan website. Pokok Bahasan : Desain lnterface . Web page design dibandingkan desain konvensional(desain cetak) . Make your web Pages freestanding . User - Centered design . Accesibilty
Legibility
o o o o o o o
Alignment Line length Whtte sPace Typefaces Type size Case EmPhasis
Ceramah Menggunakan
media LCD, papan tulis, notebook dan
lnfokus
. o . . 11
consistency Cross-platformissues Accessibility TYPe graPhics
Praktikum : Menerapkan typography terhadap halaman-halaman yang telah dibuat . Poko Bahasan : GRAPHICS . Characteristics of Web graphics . Color displays
. . . . .
12
14
"Browser-safe"colors Dithering
Screen resolution Gamma Graphics and network bandwidth . Graphic file formats . GIF files . JPEG graphics . PNG graphics . lmaging strategies . lmages on the screen . The screen versus printed color artwork . Complex illustrations or photographs . Diagrams for the computer screen . HTML and graphics . Accessibility Praktikum menqqunakan ohotosop untuk membuat qambar.backqround Pokok bahasan : MULTIMEDIA . Applications for multimedia . Web multimedia strategies o Audio only o Slide shows o Video o Animation . Preparing multimedia o Processing
. .
'13
Ceramah Menggunakan media LCD, papan tulis, notebook dan lnfokus
a
a
o
Ceramah Menggunakan media LCD, papan tulis, notebook dan
lnfokus
Delivery
Design and multimedia Accessibility Praktikum . Pemakaian Photosop untuk mendesain graphics . Menambahkan Graphis ke halaman Web . Pemakaian flash untuk membuat animasi . Menambahkan animasi ke halaman web . Menambah multemedia pada halaman web Javascript . PengertianJavaScript . Tipedata,variabel,Operator . Konstruksi dasar Sequence,pencabangan,pengulangan . Fungsi , user defined function Javascript . Event-eventjavascript . Mouseover
a o
Ceramah Menggunakan
media LCD, papan tulis, notebook dan
.
lnfokus Ceramah Menggunakan media LCD,
.
. . . . . . r
.
Click Focus Blur
change Select Submit load unload
Validasi Javascript Object object internal javascript (siring,array,math,date) object external (object dari browser : DOM/Document Object Model) Presentasi Tuqas Besar web
15 16
UAS
12. BAHAN, SUMBER INFORMASI DAN REFERENSI:
. . . '.
Todd Stauffer, HTML By Example, ISBN: 0-7897-0812-4 Dominikus Juju, Kupas Tuntas CSS,Elex Media Computindo,2007 Patrick Lynch,Sarah Horton, WEB STYLE GUIDE, 2nd edition www.w3schools.org http://www.opera.com/company/education/curriculum/, Opera web standards Curriculum
papan tulis, notebook dan
lnfokus
