1.1. Pengenalan CSS
CSS (Cascading Style Sheets) adalah salah satu bahasa pemrograman desain web yang mengontrol tampilan sebuah halaman web, tujuan utama CSS diciptakan adalah untuk membedakan konten dari dokumen dan tampilan dari dokumen, dengan itu pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukuran dan formatting.
Bayak keuntungan dalam membuat web menggunakan CSS, karena CSS sudah menjadi elemen penting dalam pembuatan web yang sederhana dan sesuai dengan teknologi web 2.0 (web modern). Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu halaman web sehingga membuat waktu dalam membuat web jauh lebih cepat.
W3C adalah (Word Wide Web Consortium) adalah sebuah konsorsium/gabungan dari pemilik web, universitas, perusahaan seperti Opera, Mozila, Apple, Netscape, Microsoft serta juga para ahli dalam bidang web membuat rekomendasi untuk CSS, CSS1 dan CSS2. Ada beberapa spesifikasi CSS yang masih kurang sempurna berjalan di beberapa browser dan ada pula beberapa CSS yang belum direkomendasikan tetapi dapat berjalan sempurna pada browser tertentu contohnya browser Internet Explorer.
2. PENYAJIAN ALGORITMA
PENDAHULUAN
Dua teknik penyajian algoritma yaitu:
¢ Teknik Tulisan : Metode English Structure dan Pseudocode disebut juga Program Design Language (PDL).
¢ Teknik Gambar : Metode Structure Chart, Hierarchy plus Input-Process-Output (HIPO), Flowchart, dan Nassi Schneiderman Chart.
ENGLISH STRUKTURE
¢ Menggunakan bahasa manusia sebagai dasar penggambaran algoritma.
¢ Basis dari English structure adalah bahasa Inggris, tetapi juga dapat menggunakan bahasa Indonesia.
¢ Lebih tepat untuk menggambarkan algoritma yang akan dikomunikasikan kepada pemakai sistem.
PSEODOCODE
¢ Kode atau tanda yang menyerupai kode pemrograman sebenarnya yang merupakan penjelasan cara menyelesaikan suatu masalah.
¢ Pseudocode sering digunakan oleh manusia untuk menuliskan algoritma.
¢ Pseudocode ditulis berbasis bahasa pemrograman, mis: BASIC, PASCAL, atau C.
¢ Lebih tepat untuk menggambarkan algoritma yang akan dikomunikasikan kepada programmer.
GAYA PENILISAN ENGLISH STRUKTURE
¢ Common Style,
menggunakan huruf besar di awal dan selanjutnya huruf kecil semua.
¢ Capitalized Common Style,
menggunakan huruf besar semua.
¢ Outline Common Style,
dengan menggunakan nomor urut.
¢ Narative Style: berbentuk uraian.
¢ Gaya lain
tiap kata kunci ditulis dengan huruf besar semua.
ATURAN PENULISAN PSEODOCODE
¢ Satu pseudocode satu baris.
¢ Pisahkan modul-modul atau kelompok pseudocode dengan memberikan spasi beberapa baris untuk mempermudah pembacaan.
¢ Pseudocode ditulis dengan huruf kapital, sedangkan komentar atau variabel dalam huruf kecil.
¢ Berikanlah tabulasi yang berbeda untuk penulisan pseudocode yang berada dalam loop atau struktur kondisional.
CONTOH
¢ Pseudocode untuk mencari bilangan terbesar dari dua bilangan yang diinputkan
1. Input a
2. Input b
3. If a > b then kerjakan langkah 4
4. print a
5. print b
FLOWCHART
¢ Bentuk gambar/diagram yang mempunyai aliran satu atau dua arah secara sekuensial
¢ Untuk menggambarkan suatu tahapan penyelesaian masalah secara sederhana, rapi, efektif, tepat dan jelas, dengan menggunakan simbol-simbol yang standar.
¢ Dua model flowchart: sistem flowchart dan program flowchart.
Flowchart: Sistem Flowchart
¢ Diagram alir yang menggambarkan suatu sistem peralatan komputer yang digunakan dalam proses pengolahan data serta hubungan antar peralatan tersebut.
¢ Tidak digunakan untuk menggambarkan urutan langkah untuk menyelesaikan masalah, tapi hanya untuk menggambarkan prosedur dalam sistem yang dibentuk.
¢ Digunakan simbol-simbol standar, atau pemrogram boleh membuat simbol sendiri dan membuat kamus simbolnya.
3.Desain Top Down, Bottom Up, dan Modular
PEMPROGRAMAN MODULAR
¢ Program dipecah-pecah kedalam modul-modul, dimana setiap modul melakukan fungsi dan tugas tertentu.
¢ Masalah akan menjadi sederhana sehingga program dapat lebih mudah disusun dan dipahami.
¢ Diterapkan dgn menggunakan subroutine (subprogram): function atau procedure.
¢ Setiap modul diberi nama sehingga untuk menyatakannya cukup dengan menyebut namanya.
Program yg didefinisikan modulnya dengan baik akan:
¢ mudah dibaca dan dimengerti oleh pemakai
¢ efisien, karena modul yang sama dapat dipakai pada beberapa tahapan program.
Karakteristik modul yang baik:
¢ Logical Coherent
Modul hanya mengandung satu fungsi tertentu saja, tidak tercampur hal-hal lain.
¢ Independent
Modul program dapat dites (diuji coba) sendiri-sendiri, tanpa harus menunggu modul lain selesai, maka harus diparameterisasi dengan baik.
¢ Ukuran Modul
Ukuran modul jangan terlalu besar, maka harus dibagi-bagi menjadi modul-modul yang kecil.
Modul program dan Parameter
¢ Modul program didefinisikan Namanya, dan akan dipanggil lewat nama tersebut untuk dieksekusi.
¢ Parameter adalah nama yang dipakai modul untuk berkomunikasi dengan program utama atau dengan modul yang lain
TOP DOWN DESIGN
¢ Berdasarkan pada tujuan program dan bukan bagaimana cara mencapainya.
¢ Setelah tujuan terdefinisi dengan jelas, dibuat garis besar proses yang akan dilaksanakan program.
¢ Secara bertahap, garis besar proses diuraikan menjadi tahapan-tahapan yang lebih terinci, sehingga akhirnya semua bagian program selesai
Pada Top Down Desain akan dihasilkan modul-modul dengan ciri-ciri:
¢ Modul mengimplementasikan proses tunggal, logis, dapat berdiri sendiri dan mudah dipahami.
¢ Modul harus independen. Tidak boleh bergantung pada implementasi di modul lainnya.
¢ Modul akan relatif pendek, disarankan kode modul tidak lebih dari satu halaman.
Keuntungan desain Top Down adalah:
¢ Menjadikan setiap tahap pemrograman menjadi lebih sederhana, karena setiap tingkat mengabaikan detail dari tingkat yang lebih rendah.
¢ Sebuah proses yang kompleks dipecah-pecah kedalam sebuah urutan langkah yang relatif sangat mudah, hasil akhirnya berupa modul yang lebih sederhana.
BOTTOM UP
¢ Diselesaikan semua pengkodean untuk modul-modul tingkat paling rendah, kemudian diuji, bila benar maka diintegrasikan ke tingkat selanjutnya dan diuji lagi.
Kualitas Bahasa Pemprograman
Kriteria yang digunakan untuk menilai kelebihan atau kekurangan suatu bahasa pemrograman:
¢ Ekspresivitas
Bhs. pemrograman yang baik, mampu secara jelas menggambarkan algoritma yang dibuat oleh pemrogramnya.
¢ Dapat didefinisikan dengan baik
Sintaks dan semantik bhs. pemrograman yang baik harus konsisten dan tidak bermakna ganda.
Sintaks: aturan-aturan gramatikal yang mengatur tata cara penulisan kata, ekspresi, dan pernyataan
Semantik: aturan-aturan untuk menyatakan suatu arti.
¢ Tipe data dan strukturnya
Bhs. pemrograman yang baik harus mampu mendukung berbagai tipe data.
¢ Modularitasnya
Bhs. pemrograman yang baik harus mempunyai fasilitas subprogramming.
¢ Fasilitas input dan output
Bhs.Pemrograman yang baik harus dapat mendukung berbagai jenis model file dalam pemrosesan input dan output.
¢ Portabilitas
Bhs.Pemrograman yang baik harus dapat dipakai di berbagai tipe mesin komputer yang berbeda-beda.
¢ Effisiensi
Bhs.Pemrograman yang baik harus dapat dikompilasi dan dieksekusi secara cepat pada mesin komputer dimana program dapat diimplementasikan.
¢ Mudah dipelajari
Mudah dipelajari maupun diajarkan.
¢ Bersifat umum
Memiliki jangkauan luas dan berbagai aplikasi pemrograman sehingga dapat disebut bahasa yang serbaguna.
¢ Batasi jumlah baris pseudocode untuk setiap modulnya, misalnya 50-75 baris, sehingga tidak terlalu panjang.
4.ADOBE PHOTOSHOP
2.1 Pendahuluan
Kehidupan ini tak lepas dari yang namanya Desain. Dimulai hal yang sangat sederhana sampai yang paling kompleks sekalipun. Misalnya, anda keluar rumah, pasti anda sudah mendesain sedemikian rupa kemana anda akan melakukan aktivitas. Anda merakit computer, itu pasti melalui tahap desain terlebih dahulu, pembuatan kue, pembuatan komponen elektronik dan lain-lain. Kalau desain anda apik dan bagus maka hasil yang didapat pasti bagus. Tidak jauh berbeda dengan Desain grafis. Untuk menciptakan suatu desain grafis yang bagus maka diperlukan software yang handal dan fleksible. Dan itu semua ada di Adobe Photoshop. Adobe Photoshop CS adalah software yang dikenal sebagai pengolah image yang handal.
2.1.1 Menu
- File
Berkaitan dengan file seperti menyimpan, membuka, export, import, dan cetak.
- Edit
Menu editing secara umum seperti cut, copy, paste, transform image, serta untuk mengatur preferences Adobe Photoshop.
- Image
Berisi editing image untuk mengatur warna, hue/saturation, brightness/contrast, ukuran.
- Layer
Berkaitan dengan manajemen layer pada image, seperti menambah layer, menghapus, menambah efek pada layer, serta masking.
- Select
Berkaitan dengan selection image.
- Filter
Berhubungan dengan pada Photoshop yang dapat digunakan untuk member Efek tertentu pada image.
- View
Digunakan untuk pengaturan view seperti zooming image, menampilkan skala, dan sebagainya.
- Window
Digunakan untuk mengatur / menampilkan window
- Help
Untuk menampilkan help dan tutorial Adobe Photoshop.
2.1.1 Tool Option Bar
Hampir semua tool pada Toolbox memiliki options, yang ditampilkan pada Tool Option bar. Options tersebut digunakan untuk mengatur nilai parameter atau option dari tool yang sedang aktif/dipilih.
2.1.1 ToolBox
Berikut ini akan dijelaskan mengenai fungsi dari masing-masing tools yang terdapat pada toolbox Adobe Photoshop . Untuk cara penggunaan lebih detil masing-masing tools akan dijelaskan secara terpisah.
A. Selection Tool
1) Marquee Tool
Saat kita klik Marquee Tool kita bis melihat ada 4 jenis marquee tool :
· Rectangular Marquee (Shortcut keyboard: M, atau Shift + M), digunakan untuk membuat area selection berbentuk segi empat pada image.
· Elliptical Marquee (Shortcut keyboard: M, atau Shift + M), digunakan untuk membuat area selection berbentuk elips atau lingkaran pada image.
· Single Row Marquee, digunakan untuk membuat area selection satu baris pada image (ukuran tinggi selection adalah 1 pixel)
· Single Column Marquee, digunakan untuk membuat area selection satu kolom pada image (ukuran lebar selection adalah 1 pixel).
2) Move Tool
(Shortcut keyboard: L, atau Shift + L untuk mengubah jenis Lasoo) Terdiri dari 3 jenis yaitu:
· Lasoo, digunakan untuk membuat area selection dengan bentuk bebas
· Polygonal Lasoo, digunakan untuk membuat area selection berbentuk polygon
· Magnetic Lasoo, digunakan untuk membuat area selection dengan cara menempelkan tepi selection pada area tertentu pada image.
3) Magic Wand Tool
(Shortcut keyboard: W) digunakan untuk membuat area selection yang memiliki warna serupa. Perbedaan toleransi warna dapat diatur pada tool option bar.
A. Crop & Slice Tool
1) Crop Tool
(Shortcut keyboard: C), digunakan untuk memangkas image (memotong dan membuang area tertentu dari image)
2) Slice Tool
(Shortcut keyboard: K, atau Shift + K untuk mengubah slice) Terdiri dari 2 jenis yaitu Slice Tool digunakan untuk membuat potongan-potongan dari suatu image dan Slice Select Tool digunakan untuk memilih potongan pada suatu image
B. Retouching Tool
1) Patch/Healing Brush Tool
(Shortcut keyboard: J, atau Shift + J mengubah tool)
- Patch Tool, digunakan untuk mengecat/melukis pada area tertentu image dengan pola (pattern) atau sample tertentu. Cocok untuk memberbaiki image yang rusak.
- Healing Brush Tool, digunakan untuk mengecat/melukis image dengan pola atau sample tertentu. Cocok untuk memperbaiki image yang agak rusak.
2) Stamp Tool
(Shortcut keyboard: S, atau Shift + S untuk mengubah tool) Terdiri dari 2 jenis yaitu:
- Clone Stamp Tool, digunakan untuk melukis image dengan sample image tertentu
- Pattern Stamp Tool, digunakan untuk melukis image dengan menggunakan pola tertentu
3) Eraser Tool
(Shortcut keyboard: E, atau Shift + E untuk mengubah jenis eraser), terdiri dari 3 jenis yaitu:
- Eraser, digunakan untuk menghapus pixel image dan mengembalikannya ke state tertentu.
- Background Eraser, digunakan untuk menghapus area tertentu image menjadi transparan.
- Magic Eraser
digunakan untuk menghapus area tertentu image yang memiliki warna yang serupa menjadi transparan dengan satu kali klik.
4) Sharpen, Blur, Smudge Tool
(Shortcut keyboard: R, atau Shift + R) terdiri dari 3 jenis yaitu :
- Sharpen Tool, digunakan untuk menajamkan area tertentu pada image.
- Blur Tool, digunakan untuk menghaluskan/mengaburkan area tertentu pada image.
- Smudge Tool, digunakan untuk menggosok/mencoreng area tertentu pada image
5) Dodge, Burn, Sponge Tool
(Shortcut keyboard: O, atau Shift + O), terdiri dari 3 jenis yaitu :
- Dodge Tool, digunakan untuk menerangkan warna di area tertentu pada image
- Burn Tool, digunakan untuk menggelapkan warna di area tertentu pada image
- Sponge Tool, digunakan untuk mengubah saturation di area tertentu pada image.
A. Painting Tool
1) Brush Tool
(Shortcut keyboard: B, atau Shift + B untuk mengubah tool), terdiri dari 2 jenis yaitu:
- Brush Tool, digunakan untuk melukis image dengan goresan kuas
- Pencil Tool, digunakan untuk melukis image dengan goresan pencil
2) History Brush Tool
(Shortcut keyboard: Y, atau Shift + Y untuk mengubah jenis), terdiri dari 2 jenis yaitu:
- History Brush Tool, digunakan untuk melukis image menggunakan snapshot atau state history dari Image
- Art History Tool, digunakan untuk melukis image menggunakan snapshot atau state history dari image, dengan model artistik tertentu.
3) Gradient, Paint Bucket Tool
(Shortcut keyboard: G, atau Shift + G), terbagi atas 2 jenis yaitu :
- Gradient Tool, digunakan untuk mengecat area yang dipilih (selected area) dengan perpaduan banyak warna.
- Paint Bucket Tool, digunakan untuk mengecat area yang dipilih dengan warna foreground atau pola tertentu.
B. Drawing And Type Tool
1) Selection Tool
(Shortcut keyboard: A, atau Shift + A untuk mengubah jenis) terdiri dari 2 jenis yaitu:
- Path Selection Tool, digunakan untuk melakukan selection path
- Direct Selection Tool, digunakan untuk mengubah anchor dan direction point dari path.
2) Type Tool
(Shortcut keyboard: T, atau Shift + T untuk mengubah jenis), terdiri dari 4 jenis yaitu:
- Horizontal Type Tool, digunakan untuk membuat tulisan secara horizontal
- Vertical Type Tool, digunakan untuk membuat tulisan secara vertical
- Horizontal Type Mask Tool, digunakan untuk membuat selection berbentuk tulisan secara horizontal
- Vertical Type Mask Tool, digunakan untuk membuat selection berbentuk tulisan secara vertikal
3) Pen Tool
- Pen Tool (Shortcut keyboard: P, atau Shift + P), digunakan untuk membuat path dengan lengkung-lengkung yang halus
- Freeform Pen Tool (Shortcut keyboard: P, atau Shift + P), digunakan untuk membuat path berbentuk bebas (sesuka kita )
- Add Anchor Point Tool, digunakan untuk menambah anchor point atau titik editor pada path
- Delete Anchor Point Tool, digunakan untuk menghapus anchor point tertentu pada path
- Convert Point Tool, digunakan untuk mengubah anchor dan direction point tertentu pada path
4) Shape Tool
(Shortcut keyboard: U, atau Shift + U untuk mengubah jenis)
- Rectangle Tool, digunakan untuk menggambar bentuk segi empat
- Rounded Rectangle Tool, digunakan untuk menggambar segi empat melengkung
- Ellipse Tool, digunakan untuk menggambar ellipse
- Polygon Tool, digunakan untuk menggambar polygon
- Line Tool, digunakan untuk menggambar garis lurus
- Custom Shape Tool, digunakan untuk menggambar bentuk tertentu dari daftar bentuk yang ada
5.
