Mereka yang bekerja di industri desain web menyamakan pengembangan situs front-end ke bangku tiga kaki. Ketiga kaki ini - tiga lapis pengembangan web - terdiri dari struktur, gaya, dan perilaku.
Mengapa Anda Harus Memisahkan Lapisan?
Ketika Anda membuat halaman web, strukturnya harus diturunkan ke HTML Anda, gaya visual ke CSS, dan perilaku ke skrip. Beberapa manfaat memisahkan lapisan adalah:
- Sumber daya bersama: Ketika Anda menulis file CSS atau JavaScript eksternal, setiap halaman di situs dapat menggunakan file itu. 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 bisa menjadi pekerjaan yang melelahkan untuk situs web besar.
- Unduhan lebih cepat: Setelah skrip atau stylesheet telah diunduh oleh pelanggan Anda untuk pertama kalinya, itu di-cache oleh browser web. Karena sumber daya yang dibagikan ini sekarang terdapat di cache browser, 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 memungkinkan file untuk diperiksa masuk dan keluar untuk memastikan bahwa semua orang bekerja dengan versi terbaru. 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 mereka dapat merayapi konten tersebut secara lebih efektif dan memahami laman tanpa macet dalam gaya visual dan informasi perilaku.
- Aksesibilitas: Lembar gaya eksternal dan file skrip lebih mudah diakses oleh orang dan browser. Perangkat lunak seperti pembaca layar dapat memproses konten dari lapisan struktur dengan lebih mudah tanpa berurusan dengan gaya yang tidak dapat digunakan.
- Kompatibilitas terbalik: Situs yang dirancang dengan lapisan pengembangan terpisah cenderung lebih kompatibel ke belakang karena browser dan perangkat yang tidak dapat menggunakan gaya CSS tertentu atau yang menonaktifkan JavaScript tetap dapat melihat HTML. Anda kemudian dapat meningkatkan situs web Anda secara progresif dengan fitur untuk browser yang mendukungnya.
HTML: Layer Struktur
Struktur atau lapisan konten dari suatu halaman web adalah kode HTML yang mendasari halaman itu. Sama seperti bingkai rumah menciptakan fondasi yang kuat di mana sisa rumah dibangun, landasan yang kuat dari HTML menciptakan sebuah platform di mana sebuah situs web dapat dibuat.
Lapisan struktur adalah tempat Anda menyimpan semua konten yang ingin dibaca atau dilihat oleh pelanggan Anda. Struktur HTML dapat terdiri dari teks dan gambar, dan itu termasuk hyperlink yang akan digunakan pengunjung untuk bernavigasi di situs web. Ini dikodekan dalam HTML5 yang sesuai standar dan dapat menyertakan teks, gambar, dan multimedia (video, audio, dll.).
Setiap aspek konten situs harus diwakili dalam lapisan struktur. Ini memungkinkan pelanggan yang menonaktifkan JavaScript atau yang tidak dapat melihat akses CSS ke seluruh situs web, jika tidak semua fungsinya.
CSS: Layer Gaya
Lapisan ini menentukan bagaimana dokumen HTML terstruktur akan melihat ke pengunjung situs dan ditentukan oleh CSS (Cascading Style Sheets). File-file ini berisi instruksi gaya untuk bagaimana dokumen harus ditampilkan di browser web. Layer gaya biasanya mencakup kueri media yang mengubah tampilan situs berdasarkan ukuran layar dan perangkat.
Semua gaya visual untuk situs web harus berada dalam stylesheet eksternal. Anda dapat menggunakan beberapa stylesheet, tetapi ingat bahwa setiap file CSS memerlukan permintaan HTTP untuk mengambilnya, yang memengaruhi kinerja situs.
JavaScript: Layer Perilaku
Lapisan perilaku membuat situs web menjadi interaktif, memungkinkan halaman untuk menanggapi tindakan pengguna atau untuk mengubah berdasarkan serangkaian ketentuan. JavaScript adalah bahasa yang paling sering digunakan untuk lapisan perilaku, tetapi CGI dan PHP sangat sering digunakan juga.
Ketika pengembang mengacu pada lapisan perilaku, kebanyakan dari mereka berarti lapisan yang diaktifkan langsung di browser web. Anda menggunakan lapisan ini untuk berinteraksi langsung dengan DOM (Document Object Model). Menulis HTML yang valid dalam lapisan konten penting untuk interaksi DOM di lapisan perilaku. Ketika Anda membangun lapisan perilaku, Anda harus menggunakan file skrip eksternal, seperti halnya CSS, untuk mengoptimalkan kecepatan dan kinerja.
