Lesson 2 - Web Design, Web Master, Dan Web Hosting
-
Upload
reza-fahlevi -
Category
Documents
-
view
86 -
download
1
Transcript of 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
Miniw0rm University | Create Your Title Web Master Here 3
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.
Miniw0rm University | Create Your Title Web Master Here 4
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
Miniw0rm University | Create Your Title Web Master Here 5
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?
Miniw0rm University | Create Your Title Web Master Here 6
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
Miniw0rm University | Create Your Title Web Master Here 7
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.
Miniw0rm University | Create Your Title Web Master Here 8
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.
Miniw0rm University | Create Your Title Web Master Here 9
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.
Miniw0rm University | Create Your Title Web Master Here 10
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
Miniw0rm University | Create Your Title Web Master Here 11
Contoh Layout Website 3 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.
Miniw0rm University | Create Your Title Web Master Here 12
Contoh Layout Website 2 Kolom
Contoh Layout Website 3 Kolom
Miniw0rm University | Create Your Title Web Master Here 13
Contoh Layout Website 2 Kolom Dengan Menu Navigasi Di Kanan
Contoh Layout Website 2 Kolom (Menu Navigasi Di Kanan + Banner)
Miniw0rm University | Create Your Title Web Master Here 14
Contoh Layout Website 3 Kolom Dengan Menu Navigasi Di Kanan + Menu Top
Contoh Website 3 Kolom Dengan Menu Top + Menu Navigasi kiri dan kanan
Miniw0rm University | Create Your Title Web Master Here 15
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:
Miniw0rm University | Create Your Title Web Master Here 16
� 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.
Miniw0rm University | Create Your Title Web Master Here 17
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)
Miniw0rm University | Create Your Title Web Master Here 18
Warna-Warna Jingga (6)
Warna-Warna Kuning (11)
Miniw0rm University | Create Your Title Web Master Here 19
Warna-Warna Ungu (17)
Miniw0rm University | Create Your Title Web Master Here 20
Warna-Warna Hijau (23)
Miniw0rm University | Create Your Title Web Master Here 21
Warna-Warna Biru (25)
Miniw0rm University | Create Your Title Web Master Here 22
Warna-Warna Coklat (17)
Miniw0rm University | Create Your Title Web Master Here 23
Warna-Warna Putih (17)
Warna-Warna Abu-Abu (10)
Miniw0rm University | Create Your Title Web Master Here 24
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.
Miniw0rm University | Create Your Title Web Master Here 25
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.
Miniw0rm University | Create Your Title Web Master Here 26
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.
Miniw0rm University | Create Your Title Web Master Here 27
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.
Miniw0rm University | Create Your Title Web Master Here 28
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.
Miniw0rm University | Create Your Title Web Master Here 29
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
Miniw0rm University | Create Your Title Web Master Here 30
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
Miniw0rm University | Create Your Title Web Master Here 31
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
Miniw0rm University | Create Your Title Web Master Here 32
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.
Miniw0rm University | Create Your Title Web Master Here 33
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.
Miniw0rm University | Create Your Title Web Master Here 34
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
Miniw0rm University | Create Your Title Web Master Here 35
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.
Miniw0rm University | Create Your Title Web Master Here 36
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.
Miniw0rm University | Create Your Title Web Master Here 37
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.
Miniw0rm University | Create Your Title Web Master Here 38
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)
Miniw0rm University | Create Your Title Web Master Here 39
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