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
2
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
3
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
4
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
5
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
6
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
7
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
8
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
9
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
10
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
11
Contoh Layout Website 2 Kolom
Contoh Layout Website 3 Kolom
Miniw0rm University | Create Your Title Web Master Here
12
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
13
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
14
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
15
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
16
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
17
Warna-Warna Jingga (6)
Warna-Warna Kuning (11)
Miniw0rm University | Create Your Title Web Master Here
18
Warna-Warna Ungu (17)
Miniw0rm University | Create Your Title Web Master Here
19
Warna-Warna Hijau (23)
Miniw0rm University | Create Your Title Web Master Here
20
Warna-Warna Biru (25)
Miniw0rm University | Create Your Title Web Master Here
21
Warna-Warna Coklat (17)
Miniw0rm University | Create Your Title Web Master Here
22
Warna-Warna Putih (17)
Warna-Warna Abu-Abu (10)
Miniw0rm University | Create Your Title Web Master Here
23
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
24
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
25
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
26
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
27
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
28
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
29
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
30
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
31
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
32
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
33
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
34
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
35
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
36
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 halhal 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
37
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
38
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
Miniw0rm University | Create Your Title Web Master Here
39