RENCANA PROGRATVI DAN KEGIATAN PEMBELAJARAN SEMESTER (RPKPS) NAMA MATAKULIAH. Pemrograman Web Dasar DISUSUN OLEH:

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

HALAMAN PENGESAHAN

Judul

Matakuliah

: pemrograman Web Dasar

Penyusun

:

Nama

:Suprayogi,S.Kom

NPP

:-Pangkat/Golongan

'. Jabatan

sekarang

:

Nama

. FeriAgustina,S.Kom

NPP

:-PangkaUGolongan

: Jabatan

sekarang

: Mengetahui:

Ketua Program Studi

Semarang, 25 Agustus 200g Penyusun,

Amiq Fahmi,

M.Kom

Supravoqi,S.Kom

_{FeriAqustina.S.Kom}

NPP.

NPP.

O686.1t.tgg8l+g

NPP.

Dekan

Fakultas llmu Komputer

Edy Mulvanto, S.Si. M.Kom NPP. 0686.11.1993.040

RENCANA PROGRAM DAN KEGIATAN PEMBELAJARAN SEMESTER (RPKPS)

NAMA

MATAKULIAH

:

Pemrograman Web Dasar

A.

KODE/SKS

.

t4(2-2)

B.

SEMESTER

:

-/Ganjil

C.

STATUS

MATAKULIAH

:

Wajib

D.

MATA KULIAH

PRASYARAT

:

Dasar Pemrograman

E.

DESKRIPSI SINGKAT

MATAKULIAH

:

Mempelajari pembangunan 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.

F.

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

lnformationarchitecture

r

Site design

.

Site construction

.

Site marketing

.

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

.

Navigation 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

.

Legibility

o

Alignment

c

Line length

o

White space

o

Typefaces

o

Type size

o

Case

o

Emphasis

.

Consistency

r

Cross-platformissues

r

Accessibility

.

Type graphics GRAPHICS

r

Characteristics of Web graphics

.

Color displays

r

"Browser-safe"colors

.

Dithering

.

Screen resolution Gamma

.

Graphics and network bandwidth

.

Graphic file formats

.

GIF files

.

JPEG graphics

.

PNG graphics

.

lmaging strategies

r

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

r

Dasar HTML

.

Head

r

Pemilihan _{doctype untuk dokumen HTML} 10. HTML Body

.

Heading,paragraphbreaklineetc.

.

lmage

.

Link

.

Table

.

Form

.

Elemen Div ,Span

.

menu navigasi ,I1. CSS

o

Pengertian CSS

.

Keuntungan penggunaan CSS

.

Aturan Penulisan

r

Macam-macam Selector Tag HTML,Class,lD,kontekstual

r

Specificity

o

Pseudoclass

.

PseudoElement

r

CSS Properties (Font,color&background, text,list)

r

table

.

Form

.

Float & clearing

.

CSS Static & Relative Positioning

.

CSS Absloute & Fixed Positioning 12. Javascript

o

PengertianJavaScript

.

Tipedata,variabel,Operator

o

Konstruksi dasar Sequence,pencabangan,pengulangan

.

Fungsi , user defined function

.

Event-event javascript: IVouseover,Click,Focus,blur,change,select,submit,load,unload

r

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

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.

EMBELAJARAN MINGG

1. RENCANA KEGIATAN P UAN (RKE M)

Minggu ke

Topik (Pokok Bahasan) Metode Pembelajaran

1 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

.

Head

.

Doctype HTML Body

.

Heading,Paragraf,BreakLine

r

Contoh sederhana penqqunaan HTML,CSS,JavaScript

Ceramah l\lenggunakan media LCD, papan tulis, notebook dan lnfokus 2. a Pokok bahasan HTML

.

List

.

lmage

.

Link

.

Table Body Ceramah Menggunakan media LCD, papan tulis, notebook dan lnfokus a a

J. Pokok bahasan HTML Body

.

Div

.

Span

Pokok Bahasan CSS

.

Pengenalan CSS

.

aturan penulisan

Macam-macam Selector Taq HTML,Class.lD,kontekstual

Ceramah Menggunakan media LCD, papan tulis, notebook dan lnfokus 4 Pokok bahasan CSS

.

Specificity

.

Pseudoclass

.

PseudoElement

.

CSS Properties (Font,color&background, text,list)

.

Table

.

Form

.

Ceramah

.

Menggunakan media LCD, papan tulis, notebook dan lnfokus

a a a

CSS Float & cleartng

CSS Static & Relative Positioning CSS Absolute & Fixed Positioning

,

Menggunakan media LCD, papan tuiis, notebook dan lnfokus 6 Pokok Bahasan : Proses pembuatan Website

.

Site definition and planning

.

lnformationarchitecture

r

Site design

.

Site construction

.

Site marketing

.

Tracking,evaluation, maintenance

.

Praktikum perencanaan pembuatan website.

Ceramah Menggunakan media LCD, papan tulis, notebook dan lnfokus Kertaslbuku untuk desain 7 konvensional(desain

r

Pokok Bahasan : Desain lnterface

.

Web page design dibandingkan desain cetak)

.

Make your web Pages freestanding

.

User

-

Centered design

.

Accesibilty

r

Navigation

Pokok Bahasan : Site Design

.

Organizationlnformation

.

Site structure

.

Site design themes

r

Site elements

Praktikum perancanqan website

.

Ceramah

.

Menggunakan media LCD, papan tulis, notebook dan lnfokus

.

Kertas/buku untuk desain 8 UTS

I

Page design

.

Visual Hierarchy

.

Consistency

r

Page dimensions

r

Page length

.

Design grids

.

Page headers & footers

r

Page layout

.

Frames

General design considerations

.

Cross-platformissues

.

Accesibility

Praktikum menerapkan page desain untuk masing-masing halaman vano telah dirancanq sebelumnYa

Ceramah Menggunakan media LCD, papan tulis, notebook dan lnfokus Kertas/buku untuk desain

10 Poko Bahasan : TyPograPhY

.

Characteristics of type on the Web

.

Content structure and visual logic

.

Cascading style sheets

.

Legibility

o

Alignment

o

Line length

o

Whtte sPace

o

Typefaces

o

Type size

o

Case

o

EmPhasis Ceramah Menggunakan media LCD, papan tulis, notebook dan lnfokus

.

consistency

o

Cross-platformissues

.

Accessibility

.

TYPe graPhics

Praktikum : Menerapkan typography terhadap halaman-halaman yang telah dibuat

11

.

Poko Bahasan : GRAPHICS

.

Characteristics of Web graphics

.

Color displays

.

"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

Ceramah Menggunakan media LCD, papan tulis, notebook dan lnfokus

12 Pokok bahasan : 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 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

Ceramah Menggunakan media LCD, papan tulis, notebook dan lnfokus '13 _Javascript

.

PengertianJavaScript

.

Tipedata,variabel,Operator

.

Konstruksi dasar Sequence,pencabangan,pengulangan

.

Fungsi , user defined function

a a o Ceramah Menggunakan media LCD, papan tulis, notebook dan lnfokus 14 Javascript

.

Event-eventjavascript

.

Mouseover a

.

_Ceramah

.

Menggunakan media LCD,

.

Click

.

Focus

.

Blur

.

change

.

Select

.

Submit

r

load

.

unload Validasi Javascript Object

object internal javascript (siring,array,math,date) object external (object dari browser : DOM/Document Object Model)

papan tulis, notebook dan lnfokus

15 Presentasi Tuqas Besar web

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