Anda di halaman 1dari 18

Desain Web

Oleh: Arif Basofi


Politeknik Elektronika Negeri Surabaya
Konten Bahasan
• Mengenal Editor Web Design
• Jenis-jenis Halaman Web
Macam-macam Tool Editor Web
• Tersedia banyak sekali pilihan text editor, mulai dari text editor dengan fitur yang
sederhana sampai dengan fitur yg sangat lengkap dgn berbagai plugin tambahan
yang tersedia.
• Setidaknya ada tiga faktor yang perlu diperhatikan dalam memilih text editor,
yaitu:
1) kebutuhan fitur
2) Spesifikasi komputer yang digunakan dan
3) Bahasa pemrograman yang dipakai.
• Contohnya ketika sedang mengembangkan aplikasi dengan C# akan lebih
kompatibel jika memakai Visual Studio.
• Akan tapi pilihan bergantung pada kenyamanan pengguna masing-masing, mulai
dari mendukung lintas platform (windows, Linux, dan Mac OS), ringan dan kuat
buat bekerja, gratis, kaya fitur, pluggin atau extension untuk memudahkan dalam
coding dan tampilan yang memudahkan.
Macam-macam Tool Editor Web
1. Notepad++
• Text editor bawaan Windows yang ringan dengan kebutuhan terbatas tapi memiliki
fitur tambahan yang lebih modern dan canggih daripada Notepad juga berlisensi gratis.
• Bisa membaca bermacam bahasa pemrograman dan ada menu plugin menambah fitur.
Macam-macam Tool Editor Web
2. Atom
• Editor HTML terbaik, bersifat open source dan gratis juga mendukung semua
sistem operasi (multiplatform).
• Memiliki fitur Teletype yang
memungkinkan beberapa web
developer berkontribusi pada
kode tertentu secara bersamaan
• Karena Atom dikembangkan oleh
orang-orang di balik GitHub,
sehingga kompatibilitasnya
dengan GitHub jangan diragukan.
Macam-macam Tool Editor Web
3. Brackets
• Editor HTML yang terlihat
sangat simpel namun tangguh,
tetap ringan, multiplatform dan
juga gratis.
• Beragam fitur yang dimilikinya
menjadikannya favorit para
web developer, salah satunya
fitur inline editor yang bisa
langsung mengedit CSS dari tag
HTML.
• Juga memiliki fitur live preview
untuk melihat setiap
perubahan coding yang
dilakukan.
Macam-macam Tool Editor Web
4. Sublime Text
• Sublime Text adalah HTML editor yang
ringan dengan fitur yang sangat
lengkap.
• Tersedia untuk semua sistem operasi,
yang bisa diunduh dengan gratis tapi
harus membeli lisensi untuk dapat
terus menggunakanya. Untuk
personal, harga yang ditawarkan
sebesar $80.
• Fitur paling terkenal adalah multiple
selection yang membuat banyak
perubahan dalam sekali edit.
• Fitur otomatis lain seperti autosave
dan autocompletion, juga fitur
command palette, split editing, dan
lainnya.
Macam-macam Tool Editor Web
5. Visual Studio Code (VS Code)
• Visual Studio Code dikembangkan oleh
Microsoft, tapi bisa digunakan pada semua
platform, tidak hanya Windows dan gratis.
• VSCode kaya fitur untuk kebutuhan editing
kode HTML, seperti: Intellisense berfungsi sbg
code suggestion berdasarkan konteks saat
melakukan coding, auto-closing tags agar
menghasilkan kode HTML yang baik, memiliki
Color Picker untuk mengatur style HTML dan
mouse hover yang memberi informasi ketika
mengarahkan kursor ke kode tertentu.
• Bisa ditambahkan fungsi lain dgn memasang
extension lain dari Marketplacenya.
• Untuk perkuliahan ini saya menggunakan VS
Code ini sebagai editornya.
Macam-macam Tool Editor Web
Alasan menggunakan Visual Studio Code (VS Code)
1) Text editor gratis
2) Sudah terinstall plugin EMMET: plugin yang sangat membantu karena dapat menghemat waktu dan
mempercepat dalam pembuatan sebuah web.
3) Mudah untuk mengelola Extensions: dari menu ekstensions atau tekan CTRL + SHIFT + X
utk memilih/mencari ekstension yang ingin di install
4) Tersedia Extension yang banyak: banyak extensions VS Code untuk memudahkan pekerjaan.
5) Kostumisasi tampilan: dapat merubah tampilan seperti icon, font atau warna sesuka hati atau
menginstall berbagai tema seperti material theme atau tema lainnya yang disukai.
6) Terintegrasi dengan GIT: Di vs code sudah terintegrasi dengan git jadi lebih mudah dalam
menyelesaikan conflict atau mengetahui mana baris yang berubah atau ditambahkan. Jadi akan
lebih memudahkan dalam kerja tim.
7) Snippet : bisa membuat snippet sendiri atau menginstall snippet dari menu ekstensions.
8) Dukungan bahasa : mendukung banyak bahasa seperti C, C++, php, javascript dan masih banyak
yang lainnya.
9) Autocomplete: tersedia fitur autocomplete untuk memudahkan pekerjaan, dengan menekan CTRL
+ SPACE.
Macam-macam Tool Editor Web
Kekurangan Visual Studio Code (VS Code):
1. Performa:
• Performa stabil penggunaan VS Code memerlukan RAM diatas 4GB keatas dibanding
Sublime Text yang masih lancar di cpu 2 core dengan 2GB RAM. RAM dengan 4GB dirasa
belum cukup saat membuka browser seperti chrome mungkin vs code akan sedikit lag.
2. Menyesuaikan shortcut key
• Mungkin yang terbiasa editor lain dan beralih ke VS Code perlu membiasakan shortcut
key yang sedikit berbeda.
Jenis - Jenis Halaman Web (Web Site)
• Sebelum membangun suatu website perlu dipahami dulu
tujuan dan website seperti apa yang akan dibangun.
• Website dikategorikan menjadi 3 hal, yaitu :
1) Website berdasarkan fungsi:
2) Website berdasarkan platform:
3) Website berdasarkan sifatnya:
Jenis - Jenis Web Site
1) Website berdasarkan fungsi:
a) Website pribadi atau web blog
• Sejak tahun 2000, blog menjadi jurnal pribadi yang menjadi tren untuk dikelola dan
dipublikasikan secara online
b) Website E-commerce atau Toko Online
• Website yang berisi produk-produk yang dijual secara maya/online
c) Website Perusahaan
• Sebagai website official perusahaan yang menampilkan informasi resmi perusahaan
Jenis - Jenis Web Site
1) Website berdasarkan fungsi:
d) Website Organisasi / Instansi Pemerintahan
• Sebagai website official suatu organisasi maupun instansi yang menampilkan informasi resminya
dan yang dibutuhkan bagi masyarakat.
• Umunya memiliki domain: *.org , sedangkan instansi pemerintah *.go.id
e) Website Media Sharing
• Website yang membagikan file antar pengguna seperti music, gambar, video
• Contoh website media sharing seperti: soundcloud, youtube, dsb.
f) Website Berita
• Website yang berisi penyebaran berita atau informasi
• Contoh website berita: detik.com, jawapos.com, dsb.
Jenis - Jenis Web Site
2) Website berdasarkan plaform:
Terdapat beberapa cara membuat website berdasarkan platformnya, yaitu:
a) Menggunakan CMS (Content Manajemen System)
• Dengan CMS dapat membangun website dengan mudah dan cepat
• Contoh CMS yang sering digunakan: Wordpress, Joomla, Drupal
b) Menggunakan website builder
• Website builder digunakan untuk membangun website dengan mudah dan waktu singkat
tanpa perlu memahami ilmu coding atau desain sama sekali.
• Contoh website builder: Wix site builder dan Weebly
c) Menggunakan Code
• Website yang dibangun dengan coding umumnya menggunakan HTML dan CSS
• Contoh website dengan code seperti pada website statis
Jenis - Jenis Web Site
3) Website berdasarkan sifatnya:
a) Website Statis:
• website yang kontennya konstan atau tidak berubah dan tidak
memerlukan update secara berkala sehingga tidak membutuhkan
database.
• Setiap halaman menggunakan kode HTML yang menunjukkan informasi
yang sama untuk setiap pengunjung.
• Umumnya website statis digunakan untuk memberikan informasi dasar
/ standar mengenai perusahaan (misal. Nama, alamat, kontak, dll)
• Perubahan konten hanya dilakukan oleh webmaster.
Jenis - Jenis Web Site
c) Website berdasarkan sifatnya: (…)
b) Website Dinamis:
• Website yang kontennya tidak konstan atau berubah-ubah sehingga
membutuhkan update secara berkala dan membutuhkan suatu database.
• Informasi yang disajikan merupakan informasi khusus atau strategis
perusahaan hasil masukan data dari setiap bagian perusahaan yang diolah
dalam database (misal. Informasi penjualan, distribusi produk, prestasi SDM,
dsb).
• Perubahan konten dilakukan oleh masing-masing bagian sesuai dengan hak
pengguna.
Referensi
1. https://idwebhost.com - Hosting Terbaik Indonesia
2. https://www.niagahoster.co.id/blog/text-editor-terbaik/
3. https://www.plimbi.com/article/176010/kelebihan-dan-kekurangan-vs-
code