Mengapa semua situs web dibangun dengan kombinasi struktur, gaya, dan perilaku
Sebuah analogi umum yang digunakan untuk menggambarkan pengembangan situs web front-end adalah bahwa itu seperti bangku 3 kaki. 3 kaki ini, yang juga dikenal sebagai 3 lapisan pengembangan web, adalah Struktur, Gaya, dan Perilaku.
Tiga Lapisan Pengembangan Web
- Struktur atau lapisan konten
- Struktur atau lapisan konten dari suatu halaman web adalah kode HTML yang mendasari halaman itu. Seperti bingkai rumah menciptakan fondasi yang kuat di mana sisa rumah dibangun, demikian juga landasan yang kuat dari HTML membuat platform di mana sebuah situs web dapat dibuat. Struktur HTML dapat terdiri dari teks atau gambar dan itu termasuk hyperlink yang akan digunakan pengunjung untuk bernavigasi di sekitar situs web itu.
- Gaya atau lapisan presentasi
- Gaya atau lapisan presentasi menentukan bagaimana dokumen HTML terstruktur akan dilihat oleh pengunjung situs. Lapisan ini didefinisikan oleh CSS (Cascading Style Sheets). File-file ini berisi gaya yang menunjukkan bagaimana dokumen harus ditampilkan di browser web. Di Web hari ini, lapisan gaya juga dapat menyertakan Permintaan Media yang dapat mengubah tampilan situs berdasarkan ukuran dan perangkat layar yang berbeda.
- Tingkah laku
- Lapisan tingkah laku adalah lapisan halaman Web yang dapat merespons berbagai tindakan pengguna atau membuat perubahan pada halaman berdasarkan serangkaian kondisi. Untuk sebagian besar halaman Web, tingkat perilaku adalah interaksi JavaScript pada halaman.
Mengapa Anda Harus Memisahkan Lapisan?
Saat Anda membuat halaman web, Anda harus menjaga agar lapisan itu tetap terpisah. Struktur harus dipastikan pada HTML Anda, gaya visual ke CSS, dan perilaku untuk skrip apa pun yang digunakan oleh situs tersebut.
Beberapa manfaat memisahkan lapisan adalah:
- Sumber daya bersama
- Ketika Anda menulis file CSS eksternal atau file JavaScript, Anda dapat menggunakan file itu dengan halaman apa pun di situs web Anda. Jika Anda perlu membuat perubahan ke file itu, mungkin untuk memperbarui beberapa gaya tipografi di situs web, setiap halaman yang menggunakan stylesheet itu akan mendapatkan perubahan. Tidak perlu mengedit setiap halaman situs web secara terpisah, yang untuk situs yang lebih besar bisa menjadi pekerjaan yang melelahkan.
- Unduhan lebih cepat
- Setelah skrip atau stylesheet telah diunduh oleh pelanggan Anda saat pertama kali, cache oleh browser web mereka. Karena sumber daya bersama ini sekarang ada di cache, halaman lain yang diminta di browser memuat lebih cepat, yang meningkatkan kecepatan dan kinerja halaman secara keseluruhan.
- Tim multi-orang
- Jika Anda memiliki lebih dari satu orang yang bekerja di situs web sekaligus, Anda dapat menggunakan sistem yang untuk "check in" dan "memeriksa" file untuk memastikan bahwa semua orang dalam tim bekerja dengan versi terbaru dari file-file ini. Ini jauh lebih sulit untuk dilakukan jika gaya dan perilaku terkait dengan dokumen struktur.
- SEO
- Situs yang memiliki pemisahan gaya dan struktur yang jelas cenderung berkinerja lebih baik untuk mesin telusur karena situs tersebut dapat merayapi konten itu secara lebih efektif dan memahami laman tanpa macet dengan gaya visual atau informasi perilaku.
- Aksesibilitas
- Lembar gaya eksternal dan file skrip lebih mudah diakses oleh orang dan browser. Karena ada pemisahan gaya dan struktur, perangkat lunak seperti pembaca layar dapat lebih mudah memproses konten dari lapisan struktur tanpa macet oleh gaya yang tidak bisa digunakan.
- Kompatibilitas mundur
- Ketika Anda memiliki situs yang dirancang dengan lapisan pengembangan, itu akan lebih kompatibel ke belakang karena browser atau perangkat yang tidak dapat menggunakan gaya CSS tertentu atau yang mungkin memiliki cacat JavaScript masih dapat melihat HTML. Situs web Anda kemudian dapat ditingkatkan secara progresif dengan fitur-fitur untuk browser yang mendukungnya.
HTML - Layer Struktur
Lapisan struktur adalah tempat Anda menyimpan semua konten yang ingin dibaca atau dilihat oleh pelanggan Anda. Ini akan dikodekan dalam HTML5 sesuai standar dan itu dapat mencakup teks dan gambar serta multimedia (video, audio, dll). Penting untuk memastikan bahwa setiap aspek konten situs Anda diwakili dalam lapisan struktur. Ini memungkinkan setiap pelanggan yang menonaktifkan JavaScript atau yang tidak dapat melihat CSS untuk tetap memiliki akses ke seluruh situs web, jika tidak semua fungsi situs tersebut.
CSS - Layer Gaya
Anda akan membuat semua gaya visual Anda untuk situs web Anda di style sheet eksternal. Anda dapat menggunakan beberapa stylesheet, tetapi ingat bahwa setiap file CSS terpisah membutuhkan permintaan HTTP untuk mengambil, yang memengaruhi kinerja situs.
JavaScript - Layer Perilaku
JavaScript adalah bahasa yang paling umum digunakan untuk lapisan perilaku, tetapi seperti yang saya sebutkan sebelumnya, CGI dan PHP juga dapat menghasilkan perilaku halaman Web. Yang sedang dikatakan, ketika sebagian besar pengembang mengacu pada lapisan perilaku, mereka berarti lapisan yang diaktifkan langsung di browser Web - sehingga JavaScript hampir selalu bahasa pilihan. Anda menggunakan lapisan ini untuk berinteraksi langsung dengan DOM atau Model Objek Dokumen. Menulis HTML yang valid dalam lapisan konten juga penting untuk interaksi DOM di lapisan perilaku.
Ketika Anda membangun lapisan perilaku, Anda harus menggunakan file skrip eksternal seperti dengan CSS. Anda mendapatkan semua keuntungan yang sama dengan menggunakan style sheet eksternal.