lesson 2 - web design, web master, dan web hosting

Miniw0rm University | Create Your Title Web Master Here 2

Biografi Penulis

Virgiawan Listanto, Lahir di Metro, 30 Maret 1993. Menamati

pendidikan formalnya di SMK Negeri 3 Metro jurusan Teknik

Komputer Dan Jaringan pada tahun 2011. Saat ini bekerja sebagai

Web Administrator diperusahaan CV. Merah Putih Networks

Lampung. Berpengalaman dibidang web design sejak tahun 2009 dan

sudah membuat berbagai macam karya website seperti Toko online,

web personal, sekolah, lembaga, web company profil, radio online,

dan program aplikasi berbasis website seperti Helpdesk Request System. Pendiri Miniw0rm

University, Miniw0rm CMS, dan Miniw0rm Inc. Selain itu Virgiawan Listanto merupakan penulis

muda yang telah menelurkan buku IT berjuul “Cepat Mahir Pemrograman Web Dengan PHP dan

MySQL” terbitan Prestasi Pustaka Raya. Kini buku keduanya yang berjudul “Teknik Komputer Dan

Jaringan Untuk SMK/SMA/MA Dan Umum” tinggal menunggu giliran terbit pada September nanti.

Salah satu karya terbaiknya yang telah diminati banyak programmer muda tanah air adalah

Miniw0rm CMS. Sebuah Content Management System yang ditulis dengan bahasa pemrograman

PHP dan MySQL, Miniw0rm CMS berlisensi open source, artinya siapa saja boleh memodifikasinya

serta menggunakannya sesuai dengan keinginan masing-masing. Miniw0rm CMS dibuat dengan

model “programming for future”, artinya semua code yang ditulis dengan teknik pemrograman

prosedural. Hal ini dilakukan supaya para programmer web yang baru terjun ke dunia web design

dapat mengexplorasikan dirinya dengan memodifikasi CMS ini sesuai dengan gaya pemrograman

yang mereka gunakan. Menguasai bahasa pemrograman dan bahasa scripting berbasis website

seperti: PHP, CSS, XHTML, Javascript, JQuery, Ajax, XML dan MySQL.

Contact Person

Email: [email protected]

Facebook: http://facebook.com/popay.kodok

Twitter: http://twitter.com/kod0k_

YM: virgi.cute (maaf ID lama jadi agak narsis hehe)

Website: http://miniw0rm.us


Lesson: 2 Web Introduction

Web Design, Web Master, Dan Web Hosting

Oleh:

Virgiawan Listanto

Lisensi Dokumen:

Semua isi yang ada didalam buku ini bebas digunakan, dimodifikasi,

dan disebarkan secara bebas untuk tujuan bukan komersial. Dengan

syarat tidak menghapus atau mengubah attribute penulis dan

copyright Miniw0rm University tanpa sepengetahuan dari penulis.


Daftar Isi

Biografi Penulis

Lisensi Dokumen

Pendahuluan

BAB I – Web Design

� Hal-Hal Yang Harus Diketahui

� Menentukan Tema Website

� Menggambar Rancangan Layout Website

� Modeling Website

� Usability

� Menu Navigasi

� Tombol Home

� LINK

� Graphic Navigation Link

� Jumlah Kolom Pada Website

� Header dan Footer

� Contoh Gambaran Perancangan Layout Web Dengan Teknik Modeling Website

� Konsep Pewarnaan Website

� Triplet RGB

� Warna-Warna Pada HTML

� Warna-Warna X11

� Warna-Warna Yang Aman Untuk Website

� Warna-Warna Yang Benar-Benar Aman Untuk Website

� Warna-Warna CSS

� Dasar-Dasar Pemilihan Warna

� Konsep Tipografi Website

� Sejarah Tipografi

� Jenis-Jenis Huruf Tipografi

� Tipografi Dalam Dunia Web Design

� Teknik Slicing Image


BAB II – Web Master

� Definisi Web Master

� Web Arsitek

� Web Designer

� Web Programmer

� Web Administrator

� Web Security

� Web Developer

� Web Master

BAB III –Web Hosting

� Apa yang dimaksud dengan Web Hosting?

� Siapa saja yang membutuhkan Web Hosting?

� Mengapa Perlu Web Hosting?

� Kapan anda membutuhkan Situs Web?

� Dimana menyewa Web Hosting?

� Teknologi apa yang digunakan?

� Bagaimana cara Mengelola Web Hosting?

� Bagaimana cara membuat server webhosting?


Pendahuluan

Hay Guys ! :D Jumpa lagi bersama saya disini, kali ini kita akan mempelajari tentang web design,

web master, dan web hosting. Buku ini merupakan lanjutan dari buku sebelumnya yang berjudul

“Lesson 1: Internet Dan Website”. Setelah kalian mengetahui seluk beluk internet dan website,

kini saatnya kalian terjun ke dunia web design, web master, dan web hosting. Are You Ready?

BAB I - Web Design

Apa itu web design? Web Design adalah suatu bidang yang mempelajari pembuatan website,

mulai dari menentukan perancangan website, desain website, pewarnaan website, tipografi

website, usability website, dan slicing image website. Menurut Wikipedia.org, Secara umum web

design merupakan istilah yang mencakup bagaimana isi website ditampilkan, (biasanya berupa

hypertext atau hypermedia) yang dikirimkan kepada pengguna internet melalui World Wide Web

dengan menggunakan sebuah browser atau perangkat lunak berbasis web.

Tujuan dari web design adalah membuat website termasuk dokumen dan aplikasi yang ada

didalam web server. Sebuah website dapat berupa sekumpulan teks, gambar, suara dan konten

lainnya, serta dapat bersifat statis ataupun dinamis.

Hal-Hal Yang Harus Diketahui

Dalam dunia web design, para desainer yang ingin membangun sebuah website pastinya harus

mengetahui dulu hal-hal yang berkaitan dengan pembuatan website. Sepengalaman penulis, ada 6

hal yang harus diketahui, hal-hal tersebut antara lain:

� Menentukan Tema Website

� Melakukan Perancangan Layout Website

� Memahami Konsep Modeling Layout Website

� Memahami Konsep Pewarnaan Website

� Memahami Konsep Tipografi Website

� Memahami Teknik Slicing Image


Menentukan Tema Website

Sebelum melakukan pembuatan website, hal yang harus dilakukan adalah menentukan tema.

Tema website dapat kita pahami dari “Tipe atau kategori website” yang sudah kita bahas pada

buku sebelumnya. Misalnya saya ingin membuat website pribadi, maka tema yang saya ambil

adalah web personal. Contoh lain misalkan saya ingin membuat toko online, maka tema yang saya

ambil adalah Web E-Commerce, dan seterusnya, dan seterusnya, sampai nabrak! Wkwkwk

Menggambar Rancangan Layout Website

Setelah menentukan tema, hal yang harus dilakukan adalah menggambar rancangan

Layout/template website. Dalam merancang sebuah template, umumnya web designer melakukan

aktifitas yang dinamakan “Corat-Coret Layout”. Aksi Corat coret layout ini merupakan aktifitas

yang dilakukan untuk membuat bentuk atau model template yang akan digunakan. Namun, dalam

menggambar rancangan Layout/template juga harus ada aturannya dan tidak boleh asal-asalan.

Aturan yang penulis maksud adalah “Modeling Website”.

Modeling Website

Modeling website adalah teknik penentuan tata letak template. Pemodelan website merupakan

awal dari terbentuknya interfaces website. Didalam pemodelan website, ada beberapa hal yang

harus diketahui, antara lain:

� Usability

� Menu Navigasi

� Link

� Graphic Navigation Link

� Jumlah kolom pada website

� Header Dan Footer

Usablility (Dapat Digunakan)

Website yang baik adalah website yang dapat digunakan baik dari segi loading, navigasi, dan tata

letak template. Usability diperlukan agar tidak menyesatkan pengunjung. Akhir-akhir ini sering

saya jumpai beberapa website yang loadingnya sangat lelet, sehingga membuat saya hengkang

dari website tersebut.


Ada juga website yang memiliki terlalu banyak animasi flash dan iklan, tentu sangat risih bukan

Ketika kita ingin mencari informasi, eh.. malah dihadapkan pada tampilan seperti itu. Kemudian

ada lagi website yang desainnya sangat bagus, namun akhirnya saya hengkang juga dari website

itu, karena image yang ada pada website tersebut resolusinya terlalu besar dan lama waktu

loadingnya.

Jadi, dapat kita simpulkan bahwa Usability pada website sangat mutlak dipahami dan

direalisasikan. Sehingga pengunjung yang datang ke website kita, bisa betah berlama-lama

mencari informasi. Tips dari saya agar usability website anda berjalan dengan optimal adalah:

“hindari penggunaan gambar dan animasi flash yang berlebihan”. Cukup 1 atau 2 animasi saja

yang dianggap perlu untuk dipajang diwebsite anda, optimalkan juga resolusi gambar yang tinggi

menjadi resolusi rendah, supaya pada saat loading tidak menunggu terlalu lama.

Menu Navigasi

Navigasi yang ada pada website harus wajib dibuat, jika tidak ada menu navigasi pengunjung yang

datang pasti akan kebingungan untuk berpindah dan menjelajah kehalaman lain yang ada pada

website tersebut. Menu Navigasi dapat diartikan sebagai sekumpulan link yang tersusun rapih dan

difungsikan sebagai tombol pengontrol halaman-halaman website. Menu navigasi umumnya dapat

berbentuk text atau gambar yang berbentuk tombol.

Contoh Menu Navigasi

Tombol Home

Tombol Home sudah sangat familiar ditelinga kita, tombol ini berfungsi untuk kembali ke halaman

awal. Tips: Pastikan anda menyertakan tombol “home” pada struktur menu navigasi disitus anda.


LINK

Link merupakan sekumpulan text atau gambar yang berfungsi sebagai tombol navigasi pada

website. Dengan adanya LINK, pengunjung dapat menjelajah dan berpindah dari halaman satu

kehalaman lain di website anda. Umumnya sebuah link ditandai dengan garis bawah yang

berwarna biru. Namun karena selera orang berbeda-beda, maka sebuah link yang tadinya ditandai

dengan garis bawah berwarna biru dapat disulap menjadi sebuah tombol image, atau text yang

memiliki warna sesuai dengan selera. Link yang bergaris bawah dan berwarna biru dinamakan

Default Link, sedangkan Link yang sudah dimodifikasi dinamakan Link Style. Bentuk link bisa

dicontohkan pada pembahasan menu navigasi yang sudah kita bahas diatas.

LINK hanya mengenal 2 target yaitu _blank dan _none/tanpa target. Link yang memiliki target

_blank berfungsi untuk membuat jendela Tab baru pada browser, sedangkan link yang memiliki

target _none/tanpa target berfungsi untuk melakukan perpindahan halaman pada jendela tab

yang sama di browser.

Link yang memiliki target _blank dinamakan (External Link), sedangkan Link yang tidak memiliki

target dinamakan (Internal Link). External Link umumnya dibuat untuk diarahkan ke website lain

atau halaman lain yang otomatis membuat jendela tab baru di browser.

Contoh External Link

Graphic Navigation Link

Sebuah Link tidak hanya berbentuk text biasa, namun juga dapat berbentuk sebuah tombol yang

menyerupai gambar. Graphic Navigation Link adalah sebuah menu navigasi yang berbentuk

graphic atau gambar.


Penggunaan Graphic Navigation Link dipercaya memiliki daya tarik tersendiri bagi para

pengunjung website. Menu navigasi yang berbentuk grafik dapat juga berbentuk tombol animasi,

tombol animasi biasanya dibuat dengan bantuan software pengolah citra seperti adobe

photohsop, adobe image ready, atau software pengolah animasi seperti adobe flash.

Contoh Graphic Navigation Link

Jumlah Kolom Pada Website

Dalam pemodelan website, jumlah kolom maksimal untuk menaruh isi berita, menu, dan

komponen-komponen lain adalah 3 kolom. Namun karena selera tiap desainer berbeda-beda,

mereka dapat membuat 4 kolom atau lebih yang sudah didesain sedemikian rupa agar website

terlihat cantik dan mempesona. Jumlah kolom minimal pada standar desain website adalah 2

kolom, 1 kolom untuk menu navigasi, dan 1 kolom lagi untuk isi informasi. Tips dari saya: Jika ingin

membuat website yang memiliki banyak menu navigasi, gunakanlah format 3 kolom. Sedangkan

jika ingin membuat website yang memiliki sedikit menu navigasi, gunakan format 2 kolom standar.

Contoh Layout Website 2 Kolom



Header Dan Footer

Header dan Footer yang terdapat pada website sangat penting untuk dibuat, jika tidak ada header

sebuah website akan tampak aneh. Begitu pula jika tidak ada footer, sebuah website yang tidak

memiliki footer akan terlihat biasa-biasa saja. Terkadang hal ini sering dianggap sepele oleh

beberapa desainer website. Padahal kalau dimanfaatkan dengan baik, header dan footer akan

menjadi nilai plus bagi pembuatnya. Header umumnya digunakan untuk meletakan nama website,

slogan website, banner, atau logo. Sedangkan footer digunakan untuk meletakkan infromasi

copyright, alamat, link navigasi contact us dan lain sebagainya.

Contoh Gambaran Perancangan Layout Web Dengan Teknik Modeling Website

Sekarang kita sudah mengetahui konsep perancangan layout menggunakan teknik modeling

website, selanjutnya penulis akan memberikan contoh-contoh layout website yang nantinya akan

berguna sebagai referensi example layout kalian. Berikut beberapa contoh layout website sesuai

dengan jumlah kolom, tata letak, menu navigasi, serta header dan footer.


Contoh Layout Website 2 Kolom Dengan Menu Navigasi Di Kanan

Contoh Layout Website 2 Kolom (Menu Navigasi Di Kanan + Banner)


Contoh Layout Website 3 Kolom Dengan Menu Navigasi Di Kanan + Menu Top

Contoh Website 3 Kolom Dengan Menu Top + Menu Navigasi kiri dan kanan


Konsep Pewarnaan Website

Warna adalah nyawa dari website. Tanpa adanya warna, website tidak akan terlihat cantik dan

indah. Seorang web designer bebas menentukan warna yang akan digunakan untuk mewarnai

websitenya. Menurut Wikipedia.org . Warna-warna website dapat dispesifikasikan menggunakan

Triplet RGB dalam format Hexadecimal atau bisa disebut juga dengan triplet hexsadecimal. Cara

lain memberikan warna website adalah dengan mereferensikan warna-warna tersebut kedalam

bahasa inggris. Akan tetapi cara ini berlaku sangat terbatas pada warna-warna yang telah dikenal

atau dirumuskan. Untuk variasi-variasi warna lain umumnya dibutuhkan Software grafik seperti

adobe photoshop, yang didalamnya memiliki Color Picker (Peralatan Warna) untuk membuatnya.

Triple RGB

Triplet RGB terdiri dari enam buah karakter heksadesimal yang tiap dua per dua karakternya

menyatakan entitas dari Red (merah), Green (hijau), dan Blue (biru). Nilai-nilai yang dapat diisikan

untuk tiap-tiap entitas RBG adalah mulai dari 00 sampai FF. Atau dalam bentuk angka desimal 0

sampai 255.

Triplet RGB Color

Tiap dua karakter dari R, G, dan B dapat di representasikan dalam satu byte (delapan bit), sehingga

RGB sendiri dapat di representasikan menjadi suatu entitas berukuran 3 byte, yaitu:


� byte 1: Nlai merah (R)

� byte 2: Nilai hijau (G)

� byte 3: Nilai biru (B)

Akan tetapi cara ini umumnya digunakan dalam menyimpan informasi pada berkas grafik atau

gambar dan tidak lazim digunakan dalam dokumen HTML. Walaupun demikian pengertian ini

sangat mutlak diperlukan, mengingat batasan nilai yang dapat diisikan untuk tiap entitas RGB

diturunkan dari batasan ukuran byte, yang dulunya hanya 8 bit (0-255 atau 00-FF). Meskipun

adanya batasan tersebut, jumlah warna yang dapat ditampilkan menggunakan sistem pewarnaan

ini sudah cukup banyak, yaitu: 256 x 256 x 256 = 16.777.216. Dengan kata lain, lebih dari 16 juta

warna dapat di representasikan dengan cara ini.

Warna-Warna Padan HTML

Spesifikasi HTML 4.01 mendefinisikan memiliki enam belas warna. Warna-warna ini juga

dispesifikasikan sebagai RGB dalam HTML 3.0 dengan catatan warna-warna ini berasal dari standar

16 warna yang didukung oleh VGA Windows.


Warna-Warna X11

Sebagai tambahan, sejumlah warna didefinisikan oleh beberapa browser seperti Internet Explorer

atau Mozilla Firefox. Suatu web browser mungkin tidak dapat mengenali semua warna ini, akan

tetapi sejak tahun 2005 semua browser modern mendukung secara lengkap warna-warna yang

telah terdaftar. Warna-warna ini diambil dari daftar warna X11 yang didistribusikan bersama

sistem X Window. Warna-warna X11 memiliki 141 nama-nama warna, antara lain:

Warna-Warna Merah (9)

Warna-Warna Pink (6)


Warna-Warna Jingga (6)

Warna-Warna Kuning (11)


Warna-Warna Ungu (17)


Warna-Warna Hijau (23)


Warna-Warna Biru (25)


Warna-Warna Coklat (17)


Warna-Warna Putih (17)

Warna-Warna Abu-Abu (10)


Warna-Warna Yang Aman Untuk Website

Warna-warna yang aman untuk website umumnya memiliki 216 warna, yang dulunya

dikembangkan pada saat komputer hanya dapat menyajikan 256 warna. Warna-warna ini dipilih

secara khusus karena cocok dengan warna yang digunakan oleh kebanyakan web browser terkini.

Warna-warna yang aman untuk website tidak memiliki nama warna, tetapi tiap warnanya dapat

dispesifikasikan dengan triplet RGB. Tiga digit triplet RGB (tiga karakter hexadecimal) digunakan

sebagai kependekan dari triple RGB yang terdiri dari enam digit (enam kerakter heksadesimal). CSS

atau Cascading Style Sheet mendukung kedua format ini, baik triplet RGB yang bertipe tiga digit

maupun enam digit. Pada tabel berikut ini disajikan warna-warna yang aman untuk website dan

tersusun atas 3 digit.


Warna-Warna Yang Benar-Benar Aman Untuk Website

Perancang website umumnya disarankan untuk tetap menggunakan warna-warna aman dalam

situs website mereka. David Lehn dan Hadley Stern sejak saat itu menemukan bahwa hanya ada

22 warna dari 216 warna yang dapat dipercaya untuk ditampilkan tanpa ketidak-konsistenan pada

tampilan komputer dengan kedalaman warna 16-bit. Mereka menamakan 22 warna ini sebagai

palet warna yang "benar-benar aman". Palet tersebut terdiri dari sebagian besar tingkatan warna

hijau dan kuning. Warna-warna yang dimaksud ditabelkan pada gambar berikut ini.

Warna-Warna CSS

Bahasa Cascading Style Sheet mendefinisikan jumlah warna yang sama dengan warna-warna pada

HTML 4. Sebagai tambahan CSS 2.1 menambahkan warna 'orange' pada daftar tersebut.


Dasar-Dasar Pemilihan Warna

Dikutip dari Ebook: Merancang Web pada situs www.slametriyanto.net

Pemilihan warna untuk website akan memiliki kesan tersendiri bagi pembuatnya, dan hanya

pembuatnya sendiri yang mengetahui makna dari pemilihan warna tersebut. Berikut ini adalah

warna-warna yang umumnya digunakan dan masing-masing warna memiliki makna positif dan

negatif. Dasar pemilihan warna website dikelompokan menjadi tiga, yaitu: Warna sejuk, warna

Hangat, dan Netral.

Warna-Warna Sejuk: Biru, Hijau, Ungu, dan Perak. Warna-warna sejuk cenderung berpengaruh

memberikan perasaan tenang bagi yang melihatnya. Meskipun digunakan sendiri, warna-warna ini

bisa mempunyai rasa dingin atau impersonal, Berikut ini makna dari warna dalam kategori sejuk.

Biru

- Positif: keheningan, mencintai, kesetiaan, rasa aman, percaya, intelligence.

- Negatif: kedinginan, ketakutan, kejantanan,

Hijau

- Positif: pertumbuhan, kesuburan, kesegaran, (penyembuhan/pengobatan), healing, keteduhan,

- Negatif: iri hati, kecemburuan, kesalahan, kekacauan,

Ungu

Ungu adalah kombinasi biru dan merah, oleh sebab itu ditemukan baik didalam kategori warna

hangat maupun sejuk.

- Positif: raja, kaum ningrat, spirituality, kemewahan, ambition

- Negatif: misteri, kemasgulan

Perak

- Positif: glamor, tinggi, anggun, halus dan rapi (sleek).

- Negatif: pengkhayal, tidak tulus.


Warna-Warna Hangat: Merah, merah muda, kuning, orange, ungu, dan emas. Warna hangat

cenderung mempunyai suatu efek kegairahan bagi yang melihatnya. Oleh karena itu ketika warna

ini digunakan dapat menstimulasi, membangitkan emosi kekerasan/kehebatan dan kemarahan.

Berikut ini makna dari warna hangat:

Merah

- Positif: cinta, energi, kuasa, kekuatan, penderitaan, panas.

- Negatif: kemarahan, bahaya, peringatan, ketidaksabaran.

Merah muda

- Positif: sehat, bahagia, feminin, rasa kasihan, manis, suka melucu.

- Negatif: kelemahan, kewanitaan, ketidak dewasaan.

Kuning

- Positif: terang/cerdas, energi, matahari, kreativitas, akal, bahagia.

- Negatif: penakut, tidak bertanggungjawab, tidak stabil.

Orange

- Positif: keberanian, kepercayaan, kehangatan/keramahan, keakraban, sukses.

- Negatif: ketidak-tahuan, melempem, keunggulan.

Ungu

Warna ungu ditemukan di dalam kedua-duanya warna dingin dan hangat.

- Positif: royalti, kebangsawanan, kerohanian, kemewahan, ambisi.

- Negatif: kegaiban, kemurungan.

Emas

- positif: kekayaan, kemakmuran, berharga, tradisional.

- negatif: ketamakan, pemimpi.


Warna-Warna Netral: Coklat, berwarna coklat, kelabu, putih dan hitam. Warna netral adalah

suatu pemilihan agung untuk bergaul dengan suatu palet (lukis) hangat atau dingin. warna-warna

netral sangat baik untuk latar belakang dalam suatu situs. Tambahkan warna hitam untuk

menciptakan suatu yang lebih gelap ”dan keteduhan” tentang suatu warna utama. Berikut

beberapa makna dari warna netral:

Hitam

- Positif: perlindungan, dramatis, serius, bergaya/anggun, formalitas.

- Negatif: kerahasiaan, kematian, kejahatan/ malapetaka, kegaiban.

Abu-abu

- Positif: keamanan, keandalan, kecerdasan/inteligen, padat, konservatif.

- Negatif: muram, sedih, konservatif.

Coklat

- Positif: ramah, bumi, keluar rumah, umur panjang, konservatif.

- Negatif: dogmatis, konservatif.

Putih

- Positif: kebaikan, keadaan tak bersalah, kesucian, segar, gampang, bersih.

- Negatif: musim dingin, dingin, jauh.

Konsep Tipografi Website

Menurut Wikipedia.org, Tipografi adalah Ilmu yang mempelajari tentang Huruf dan penggunaan

Huruf dalam desain komunikasi visual untuk menciptakan kesan tertentu, sehingga dapat

menolong pembaca untuk mendapatkan kenyamanan membaca semaksimal mungkin.

Sejarah Tipografi

Sejarah perkembangan tipografi dimulai dari penggunaan pictograph. Bentuk bahasa ini digunakan

oleh bangsa Viking Norwegia dan Indian Sioux. Kemudian dinegara Mesir berkembang jenis huruf

yang bernama Hieratia, huruf hieratia terkenal dengan nama Hieroglif pada sekitar abad 1300 SM.


Bentuk tipografi ini merupakan akar dari bentuk Demotia yang ditulis menggunakan pena khusus.

Bentuk tipografi akhirnya berkembang sampai di Kreta, lalu menjalar ke Yunani dan akhirnya

menyebar keseluruh Eropa.

Puncak perkembangan tipografi, terjadi kurang lebih pada abad 8 sebelum masehi di Roma saat

orang Romawi mulai membentuk kekuasaannya. Karena bangsa Romawi tidak memiliki sistem

penulisan sendiri, mereka mempelajari sistem penulisan Etruska yang merupakan penduduk asli

Italia serta menyempurnakannya sehingga terbentuklah huruf-huruf Romawi.

Saat ini tipografi mengalami perkembangan dari fase penciptaan dengan tangan hingga mengalami

komputerisasi. Fase komputerisasi membuat penggunaan tipografi menjadi lebih mudah dengan

jenis pilihan huruf yang jumlahnya mencapai ratusan.

Jenis huruf Tipografi

Secara garis besar huruf-huruf tipografi digolongkan menjadi:

Roman, pada awalnya adalah kumpulan huruf-huruf kapital seperti yang biasa ditemui di pilar dan

prasasti Romawi, namun kemudian berkembang menjadi keseluruhan huruf yang mempunyai ciri

tegak dan didominasi garis lurus kaku.

Serif, memiliki ciri siripan di ujungnya. Selain membantu keterbacaan, siripan juga mempermudah

saat huruf diukir ke batu. Contoh penggunaan huruf bersirip antara lain berada dinisan Johanna

Christine, Museum Taman Prasasti.

Contoh penggunaan huruf bersirip di nisan Johanna Christine, Museum Taman Prasasti


Egyptian, atau populer dengan sebutan slab serif. Cirinya adalah kaki/sirip/serif yang berbentuk

persegi seperti papan dengan ketebalan yang sama. Kesan yang ditimbulkan Egyptian adalah

kokoh, kuat, kekar dan stabil.

contoh huruf slab serif di nisan Thomas de Souza, di pintu masuk Museum Taman Prasasti

Sans Serif, memiliki ciri tanpa sirip/serif, dan memiliki ketebalan huruf yang. Kesan yang

ditimbulkan oleh huruf jenis ini adalah modern, kontemporer dan efisien.

Script, merupakan goresan tangan yang dikerjakan dengan pena, kuas atau pensil tajam, dan

biasanya miring ke kanan.

Miscellaneous, merupakan pengembangan dari bentuk-bentuk huruf yang sudah ada. Ditambah

hiasan dan ornamen, atau garis-garis dekoratif. Kesan yang ditimbulkan adalah dekoratif dan

ornamental.

Tipografi Dalam Dunia Web Design

Penggunaan font (huruf) dalam dunia web design berbeda dengan penggunaan font pada desain

grafis. Dalam bidang desain grafis, kita bebas menentukan jenis font apa saja, baik yang bentuknya

unik, asik, atau menarik. Karena hasil akhirnya adalah berbentuk cetak (print). Berbeda dengan

penggunaan font pada web design, sebab tidak semua font bisa ditampilkan di web browser.

Berikut adalah beberapa font yang umumnya digunakan didunia web design:

� Time News Roman

� Arial

� Comic Sans MS

� Verdana

� Tahoma


Teknik Slicing Image

Slicing adalah teknik memotong-motong gambar menjadi beberapa bagian dari ukuran yang besar

menjadi ukuran yang kecil. Hal ini dilakukan untuk mengoptimasi loading website. Teknik slicing

image biasanya dilakukan pada tahap akhir perancangan dan pendesainan layout website, Slicing

bisa dilakukan menggunakan software pengolah citra seperti adobe photoshop. Selain itu, dengan

melakukan proses slicing, kita dapat menentukan kualitas format gambar yang sesuai untuk

optimasi loading website. Misalnya saya memiliki gambar banner dengan ukuran 924 Kb,

kemudian gambar tersebut saya optimalkan dengan proses slicing, pada tahap ini saya berhak

menentukan format gambar apa yang akan digunakan misalnya GIF, PING, atau JPG, dengan

berpatokan pada ukuran Kilo byte yang paling rendah sesuai dengan formatnya masing-masing.

Tips! Untuk gambar-gambar yang memiliki panjang dan lebar yang besar, disarankan

menggunakan format JPG, untuk gambar yang tidak memiliki background disarankan

menggunakan format PNG, dan untuk gambar-gambar yang ringan seperti background website,

background menu, dan sebagainya disarankan wajib menggunakan format GIF.

Contoh pada saat proses slicing image


BAB II - Web Master

Dibalik layar, peran seorang web master sangat penting untuk diketahui, dengan kehadiran

mereka situs-situs yang bertebaran di internet tercipta satu persatu. Mulai dari situs yang sangat

sederhana, hingga situs-situs yang dapat membuat kita terkagum-kagum, entah karena desain

website yang dibuat begitu indah, atau karena program aplikasi yang diciptakan begitu interaktif.

Profesi ini bisa dibilang menggiurkan bagi sebagian orang, perkembangan internet yang begitu

cepat menyebabkan beberapa orang ingin terjun dan menekuni profesi ini. Tidak perlu pendidikan

khusus untuk menjadi seorang web master, bahkan orang yang belum mengerti apa-apa bisa juga

menjadi web master jika mereka mau belajar secara otodidak. Kebanyakan web master mengawali

profesi ini dari hobi, kecintaan mereka terhadap bidang desain dan programming menjadi senjata

ampuh untuk berevolusi menjadi web master yang maju dan sukses. Namun, apakah kalian tahu,

kalau web master sebenarnya terpecah-pecah menjadi beberapa bagian? Berikut ini adalah

definisi web master sesuai dengan bagian dan tugasnya masing-masing.

Web Arsitek

Web Arsitek adalah orang yang membangun rancangan website seperti halnya arsitek bangunan.

Untuk menjadi web arsitek diperlukan pengetahuan khusus tentang tipe-tipe dan model-model

website, serta pemahaman akan konsep modeling website, sehingga dapat menciptakan skema

situs yang baik. Biasanya web arsitek disewa oleh pengembang web untuk situs-situs besar dan

tentunya memiliki perancangan khusus.

Web Designer

Web Designer adalah orang yang bertugas mendesain halaman-halaman website, untuk menjadi

seorang web designer tentunya harus memiliki jiwa seni yang tinggi. Kalau tidak, sudah pasti

desain website yang dihasilkan akan nampak kasar dan tidak begitu indah. Hal-hal yang harus

dikuasai untuk menjadi seorang web designer adalah: konsep desain website, konsep modeling

website, pewarnaan (coloring), tata letak gambar, tipografi yang digunakan, teknik slicing,

penguasaan software pengolah citra seperti adobe photoshop, penguasaan software editing

website seperti dreamweaver, penguasaan bahasa markup HTML, Stylesheet CSS, dan scripting

language javascript.


Web Programmer

Web Programmer adalah orang yang bertugas untuk membuat aplikasi website berjalan secara

dinamis dan interaktif. Biasanya web programmer bekerja setelah web designer rampung

menyelesaikan desain halaman website. Hal-hal yang harus dikuasai untuk menjadi seorang web

programmer adalah: memahami algoritma dan flowchart pemrograman, memahami salah satu

bahasa pemrograman website seperti PHP, memahami salah satu database (basis data) seperti

MySQL, memahami bahasa markup HTML, Stylesheet CSS, Scripting language Javascript, dan tidak

menutup kemungkinan memahami penggunaan framework PHP seperti: Cake PHP, Codeigneiter,

atau Zend PHP.

Web Administrator

Web Administrator adalah orang yang bertanggung jawab atas jalannya sebuah website. Tanpa

adanya web administrator, sebuah website akan Nampak “mati” atau tidak bergerak sama sekali

(statis). Contohnya situs detik.com, sebuah situs portal berita yang memerlukan pasokan berita

setiap harinya dan tentunya memerlukan seorang atau lebih web administrator untuk mengurus

semuanya, agar berita yang disajikan selalu up to date setiap harinya. Web Administrator juga

berperan penting dalam pengelolaan web server, domain, database dan masih banyak lagi. Hal-hal

yang harus dikuasai untuk menjadi seorang web master adalah: memahami konsep dan cara kerja

web server, mampu melakukan konfigurasi web server, menguasai salah satu database (basis

data) seperti MySQL, mengetahui apa itu Domain, menguasai salah satu sistem operasi berbasis

jaringan seperti Linux, dan mengetahui setidaknya tentang keamanan jaringan internet.

Web Security

Web Security adalah orang yang bertanggung jawab terhadap keamanan website. Biasanya web

secutiy melakukan beberapa kegiatan seperti: pentest (penetration testing), mencari bug/hole

pada website, melakukan Patching atau membangun pertahanan website, serta selalu update

mencari informasi tentang Bug pada web server yang digunakan. Web Security juga bisa

berprofesi sebagai Hacker, karena pada dasarnya hacker dan web security adalah orang yang

bertanggung jawab atas keamanan jaringan internet.


Namun ruang lingkup Hacker sangat luas, dan web security merupakan salah satu bagian dari

Hacker. Tanpa Hacker, jaringan komputer bahkan internet tidak akan tercipta, tanpa hacker juga

kemanan jaringan tidak akan pernah kokoh dan terus dapat dibobol oleh cracker.

Web Developer

Beberapa orang mungkin memiliki pendapat yang berbeda tentang pengertian Web Developer,

Menurut pendapat saya: Web Developer adalah orang yang bertugas mengembangkan website.

Baik itu desain interfaces, aplikasi web, Content Management System, serta teknologi website.

Menurut pendapat orang lain yang saya temukan digoogle: Web Developer adalah orang yang

menciptakan aplikasi website dengan menggunakan bahasa pemograman. pada dasarnya, web

developer membuat berbagai hal "terjadi" pada sebuah website. Peran web developer, adalah

sebagai penghubung dari semua sumber daya yang akan digunakan pada sebuah website, mulai

dari pemanggilan database, membuat halaman website yang dinamis, hingga mengatur cara

pengunjung untuk berinteraksi dengan elemen-elemen dari website tersebut. Seorang web

developer yang handal akan terbiasa dengan bahasa peograman, baik tu disisi server (server-side

scripting) maupun disisi client (client-side scripting). dan jangan lupa dengan aspek database yang

akan digunakan. Berikut adalah bagian aplikasi yang harus dipahami oleh seorang web developer:

1. Client-side : JavaScript

2. Server-Side : ASP, ASP.Net, Java, Perl, PHP, Python, Ruby, dsb.

3. Database : MySQL, Oracle,dsb.

Aspek tampilan menjadi sisi yang agak "terpinggirkan" oleh web developer. Pada umumnya

setelah scripting dari aplikasi web selesai dibuat, web developer akan menyerahkan pekerjaannya

kepada web designer untuk menciptakan tampilan yang baik.

Sumber:

http://www.kaltimsourcecode.com/index.php?option=com_content&view=article&id=92:pengerti

an-web-developer&catid=36:website&Itemid=65


Web Master

Menurut pendapat saya: Web Master adalah gabungan dari semua profesi diatas, baik itu web

designer, web programmer, web administrator, atau web developer. Jadi, dapat kita simpulkan

bahwa web master adalah level profesi yang paling tinggi. Karena profesi ini sudah mencakup

semuanya, makanya dinamakan “Master”. Sebagai catatan, webmaster mungkin juga bertanggung

jawab untuk melakukan optimisasi mesin pencari (SEO), mengisi content pada website, hingga

‘memasarkan’ website tersebut.

Dalam kelompok kerja yang lebih besar, webmaster akan lebih banyak menjadi manager dari

sebuah web-based project, mengatur pekerjaan web developer dan web designer, hingga

melakukan pengujian terhadap usability dari aplikasi web yang dibuat.


BAB III - Web Hosting

Sumber: Wikipedia.org

Apa yang dimaksud dengan Web Hosting?

Web Hosting adalah suatu layanan penyewaan tempat diInternet, yang memungkinkan

perorangan atau organisasi dapat menyimpan data-data websitenya mulai dari file-file, hingga

database pada web server.

Tempat dapat juga diartikan sebagai media penyimpanan data berupa megabytes (mb), hingga

terabytes (tb) yang memiliki koneksi ke internet, sehingga data tersebut dapat direquest atau

diakses oleh user dari semua tempat secara umum. Inilah yang menyebabkan sebuah website

dapat diakses bersamaan dalam satu waktu oleh multi user.

Pengertian dari sumber lain tentang Web Hosting: Web Hosting atau Server Hosting adalah

tempat menampung data-data yang diperlukan oleh sebuah website sehingga dapat diakses lewat

Internet. Secara fisikal, web hosting adalah sebuah hardisk pada sebuah sebuah server dalam

keadaan menyala/online selama 24 jam non stop. Analoginya, sebuah web site dapat diibaratkan

sama dengan Toko dalam sebuah Mall.

Manajemen Mall menyediakan infrastruktur, listrik, telpon, fasilitas dan penyewaan ruang agar

orang-orang dapat membuka toko. Setiap toko pemiliknya berbeda, dekorasinya berlainan dan

beroperasi tanpa mengganggu toko yang lainnya.

Siapa saja yang membutuhkan Web Hosting?

Seperti yang sudah dijelaskan diatas, setiap orang ataupun perusahaan dapat menyewa tempat

atau memanfaatkan jasa web hosting ini, didukung dengan kemajuan teknologi informasi yang ada

saat ini maka pemanfaatan jasa web hosting merupakan sarana alternatif yang handal untuk:

Promosi, Menyebarkan Informasi, Berjualan, Layanan Publik sampai dengan sekedar tempat untuk

menumpahkan isi hati yang kelabu dalam buku harian berbasis web (blog: web blog) akibat

ditinggal kekasih hati.


Mengapa Perlu Web Hosting?

Kecepatan menyebarkan informasi tentang Jasa, Produk, Layanan Publik dan lainnya merupakan

salah satu tolak ukur keberhasilan bisnis perorangan atau perusahaan,

Contoh Pertama: di Indonesia sekitar 100 juta pengguna telepon genggam yang tentu saja dapat

tersambung ke internet melalui gprs, tidak ada alasan lagi untuk tidak tersambung ke dunia maya,

bahkan di daerah terpencil sekalipun.

Contoh kedua: Seorang mahasiswa kedokteran, dengan dana yang terbatas, untuk mengantisipasi

membeli buku kuliah kedokteran yang harganya bisa mencapai jutaan rupiah, dapat dengan

mudah memperoleh ilmu pengetahuan dan teknologi melalui situs web, dan ini menjadi tanggung

jawab penyelenggara pendidikan untuk menyediakan jasa/layanan web site guna memajukan

pendidikan. Singkatnya, bila anda telah membuat program yang dapat dibaca oleh internet

browser seperti html, maka sudah waktunya anda menaruh disain itu di internet dengan

mengupload disain anda ke perusahaan yang melayani penjualan hosting.

Kapan anda membutuhkan Situs Web?

Disaat anda ingin memasarkan produk atau jasa melewati batas kabupaten, propinsi, negara,

samudra dan benua, disaat anda ingin orang lain memperoleh informasi yang benar mengenai hal-

hal kemanusiaan, disaat anda ingin menyebarluaskan pengetahuan demi kesejahteraan sesama

manusia, disaat anda ingin melakukan transaksi bisnis yang memudahkan pelangan anda

menjangkaunya dari sebuah vila tempat peristirahatan dengan privasi yang tinggi, disaat itulah

anda membutuhkan layanan web hosting.

Situs web adalah sebuah channel above the line termurah yang ada di pasar saat ini, kemampuan

broadcast 24 jam seminggu, tak terbatas pada aspek demografis, geografis, menjadikannya positif

dalam rasio cost to benefit. Bila anda ingin ditemukan, dikenal, diapresiasi, mengiklankan

diri/produk anda, berarti anda wajib memiliki situs web.


Dimana menyewa Web Hosting?

Ratusan bahkan ribuan penyelenggara jasa web hosting, dapat memulainya dengan mencari dari

mesin pencari google atau yahoo, tentang beberapa penyedia jasa layanan web hosting di

indonesia. Jangan ragu untuk bertanya, bandingkan fitur kunci seperti kapasitas ruang dan

kapasitas bandwidth, jangan tergiur oleh promosi penyelenggara jasa web hosting yang

bombastis.

Teknologi apa yang digunakan?

Salah satu teknologi yang digunakan adalah fail over hosting, teknologi ini memungkinkan layanan

anda tetap online 24 jam karena dudukung oleh beberapa server komputer yang secara otomatis

akan menggantikan tugas server komputer yang mengalami kerusakan

Bagaimana cara Mengelola Web Hosting?

Setelah anda memiliki/menggunakan jasa layanan web hosting, selanjutnya bagaimana

mengelolanya, hal ini merupakan tantangan yang tidak murah, sebab informasi yang ada harus

selalu ditambah dan diperbaharui. Sebuah Tips sederhana yaitu, lakukan persiapan pada posisi Off

Line untuk menghemat. Selamat mencoba.

Bagaimana cara membuat server webhosting?

Beberapa software dasar yang harus dimiliki untuk membuat server hosting sendiri

(recommended):

Operating System Server

- Linux, CentOS, FreeBSD, RedHat, Ubuntu (gratis)

- Windows 2003 Server, Windows 2008 Server (bayar)

DNS (Domain Name Sistem)

- BIND 9 (gratis)


Web Server

- Apache (gratis) – berfungsi sebagai Web Server berbasis Linux

- IIS versi 4.0, atau IIS versi 5.0 (gratis) – berfungsi sebagai Web Servr berbasis Windows

PHP (gratis)

berfungsi untuk website yang menggunakan bahasa pemograman PHP

Databases

Berfungsi sebagai pusat penyimpanan data pada server atau Server Data Center.

- MySQL (gratis) – berfungsi sebagai Databases pada server berbasis Linux/Unix

- MSSQL (bayar) – berfungsi sebagai Database pada Operating System server berbasis Windows

PHPMyAdmin

berfungsi untuk memudahkan add, edit, dan delete table pada MySQL

FTP Server

berfungsi untuk memudahkan transfer data ke website menggunakan FTP.

- ProFTPD (gratis)

- Pure-FTPD (gratis)

- vsFTPD (gratis)

Mail Server

berfungsi untuk mengelola email pada server.

- QMail (gratis)

- Postfix (gratis)

- Squirrelmail (gratis)

- RoundCube (gratis) jika ingin support WebMail

lesson 2 - web design, web master, dan web hosting

Documents