Gunakan Dreamweaver 8 untuk mencapai "standar web"

Kata Pengantar Penerjemah: Rangkaian artikel asli ini berisi total 8 artikel. Dimulai dengan mempopulerkan Standar Web dan menjelaskan cara menggunakan Dreamweaver 8 untuk membangun Web yang sesuai standar Website Sesuai Standar Sendiri Menggunakan Dreamweaver 8" (Artikel ini adalah kutipan berbayar), jadi saya telah menghapus kontennya sebagaimana mestinya. Urutannya sesuai dengan artikel aslinya, tetapi panjangnya akan disesuaikan. Dengan ini saya informasikan. Tingkat terjemahan terbatas, harap dipahami.

Jika Anda membaca artikel ini, Anda mungkin sudah tertarik dengan standar Web dan sangat penasaran dengan penerapan standar pada situs yang dibangun dengan DW (kependekan dari Dreamweaver).

Mungkin Anda sudah memiliki pemahaman tertentu tentang WS (kependekan dari Web Standards), tetapi Anda tidak tahu cara menggunakan DW untuk menulis kode yang kompatibel. Atau Anda adalah pengguna DW dan ingin mematuhi WS, menggunakan CSS secara lebih luas, dan membuat dokumen yang lebih ramah pengguna. Apa pun tipe Anda, artikel ini akan memberikan jawaban yang Anda inginkan: memberi tahu Anda cara menggunakan DW untuk menangani WS.

Definisi Standar Web

Sejauh WS yang menjadi perhatian kita sepanjang artikel ini, mari kita luangkan waktu sejenak untuk memperjelas apa yang kita bicarakan:

WS adalah spesifikasi yang memandu bahasa pengembangan Web dan dirumuskan oleh W3C. Spesifikasi ini mencakup berbagai bahasa, seperti HTML, XHTML, dan CSS, serta beberapa bahasa terkait lainnya, seperti MathML, yang digunakan untuk merepresentasikan persamaan dalam matematika. . W3C juga menerbitkan Pedoman Aksesibilitas Konten Web (WCAG) - yang mempromosikan aksesibilitas halaman web (melalui WAI).

Tip: Dapatkan pedoman ini secara langsung

Anda dapat membaca pedoman ini di situs web W3C, meskipun terkadang

agak

sulit

membaca

:

HTML

4.01

Siapa yang membutuhkan WS?

Anda mungkin hanya memiliki gagasan samar bahwa WS adalah hal yang baik, namun banyak situs - termasuk banyak situs terkenal - tidak mematuhi WS, dan tampaknya dikelola dengan baik. Jadi, mengapa kita harus berusaha untuk mematuhi WS? Apakah ada manfaat nyata dari melakukan hal tersebut? Siapa yang membutuhkan WS? Siapa yang perlu memperhatikan spesifikasi dan rekomendasi W3C

?

pengembang dan perancang

Markup yang bersih membuat perbaikan bug menjadi lebih cepat.

Jika Anda memvalidasi halaman Anda dengan W3C, setidaknya Anda akan tahu bahwa markup yang tidak teratur bukanlah penyebab kesalahan yang Anda alami. Terkadang, proses memvalidasi halaman dan memperbaiki kesalahan yang ditemukan dapat menyelesaikan masalah tampilan yang disebabkan oleh elemen yang tidak ada habisnya atau tag yang salah eja.

Meskipun memverifikasi dokumen Anda tidak menyelesaikan masalah, setidaknya Anda akan mengetahui bahwa masalahnya ada pada dokumen kanonik. Sekarang setelah Anda mengetahui bahwa masalah ini bukan bug, Anda dapat mulai berfokus pada masalah lain, seperti perbedaan penanganan CSS di berbagai browser.

Memenuhi persyaratan aksesibilitas itu mudah.

​​Jika Anda menulis markup XHTML kanonik, maka Anda dapat memastikan bahwa dokumen tersebut benar secara semantik, dan Anda dapat memisahkan konten dokumen dari presentasi, Anda dapat melakukan banyak pekerjaan Mengatasi banyak hal masalah aksesibilitas yang tercantum di WCAG1.0. Penting juga untuk menyadari bahwa aksesibilitas tidak hanya diperuntukkan bagi penyandang disabilitas. Situs ramah dapat diakses oleh berbagai perangkat, seperti ponsel dan PDA, yang tidak memiliki kekuatan pemrosesan untuk menangani markup yang tersebar dan tidak standar.

Kompatibilitas ke depan

Jika Anda hanya mempertimbangkan kinerja halaman yang baru Anda kembangkan di browser saat ini, lalu bagaimana Anda dapat memastikan kinerjanya di browser baru di masa mendatang? Browser baru dapat mengubah halaman Anda. Tampilannya buruk, dan Anda masih kesulitan untuk menemukan dan memperbaiki masalah yang mengganggu.

Mematuhi WS tidak akan sepenuhnya menghilangkan masalah ini; namun, kompatibilitas standar sangat mengurangi risiko kegagalan desain Anda, dan perusahaan perangkat lunak browser saat ini juga mulai mendukung standar. Mereka mungkin secara tidak sengaja salah menafsirkan beberapa bagian dari spesifikasi, namun mereka tidak dapat sepenuhnya menolaknya. Jika hal terburuk terjadi dan browser baru menghasilkan efek aneh pada situs standar Anda, memperbaikinya jauh lebih mudah daripada situs yang tidak kompatibel. Jika Anda mengalami masalah, itu juga akan memengaruhi situs lain yang memenuhi standar. Kebijaksanaan kolektif komunitas web akan menunjukkan hal ini dan menulis artikel untuk mengatasinya. Oleh karena itu, semua orang secara kolektif mendiskusikan bahwa lebih mudah untuk memperbaiki BUG ini di dokumen yang kompatibel daripada di dokumen yang tidak kompatibel.

Refactoring yang Lebih Mudah

Pernahkah Anda menghapus teks dari sebuah situs dan memfaktorkannya kembali? Pernahkah Anda melihat label yang penuh dengan label font dan sel tabel kecil (yang membuat kita harus memulai dari awal)? Yang saya tahu adalah saya punya, dan prosesnya panjang, banyak waktu dan uang. Semua habis pemfaktoran ulang situs ini.

Memisahkan konten dan presentasi dokumen memberi Anda keindahan kepatuhan standar: ini berarti bahwa pada saat seseorang ingin melakukan refactor situs, mereka tidak perlu menyalin dokumen Web. Semua teks di situs akan ditandai dengan semantik (X)HTML, dan semua informasi presentasi - yang ingin diubah oleh webmaster - akan disimpan dalam file CSS yang mudah diganti.

Beberapa klien tidak akan menunggu hingga difaktorkan ulang sebelum mereka mulai meminta Anda melakukan beberapa perubahan. Mereka akan menunggu sampai mereka mengunjungi Lubang Fosil Mammoth dan kemudian meminta Anda mengatakan, "Pindahkan saja kolom kiri ke kanan. ." Untuk situs kompatibel standar, semua halaman dikontrol oleh CSS. Anda dapat dengan mudah memindahkan tag pada halaman tanpa harus memikirkan trik di banyak halaman dengan tabel yang rumit sebagai strukturnya. Ini membuat perubahan tata letak halaman menjadi lebih mudah.

Memisahkan struktur dari presentasi juga dapat memudahkan penambahan elemen baru, seperti versi situs dengan kontras tinggi dan gambar kecil yang mungkin lebih menarik bagi sebagian pemirsa. Mengapa membuat halaman versi teks saja ketika Anda dapat dengan mudah mengubah style sheet?

Perusahaan perangkat lunak browser

Perusahaan perangkat lunak browser mulai memperhatikan WS. Di masa lalu, perusahaan perangkat lunak browser menambahkan tag dan atribut milik mereka sendiri ke bahasa dasar. Namun sekarang, tidak seperti sebelumnya, semuanya mulai mematuhi standar, dan beberapa browser terbaru sudah berupaya untuk menampilkannya menurut (X)HTML dan CSS seperti yang ditentukan dalam spesifikasi.

Di masa mendatang, browser akan dapat menampilkan sebagian besar markup dan kode non-standar, karena jika tidak, ribuan situs non-standar tidak akan ditampilkan dengan benar - dan masyarakat kemungkinan besar akan mulai menyalahkan browser, bukan desainer web. Namun, perangkat lain (yang tidak memiliki kekuatan pemrosesan desktop) akan lebih bergantung pada kompatibilitas standar kode yang mereka temui.

Vendor Perangkat Lunak Alat Penulisan

Vendor perangkat lunak alat pembuat—seperti Macromedia, yang membuat Dreamweaver—juga mulai mematuhi WS, begitu pula perancang Web, misalnya, karena semakin banyak pelanggan mereka yang mengharuskan alat pembuat ini menghasilkan markup kanonik. Awalnya, lingkungan pengembangan visual ini tidak memiliki reputasi yang baik karena menghasilkan markup non-standar yang membingungkan; namun, lingkungan pengembangan visual utama terbaru telah menggunakan elemen standar kompatibilitas dan aksesibilitas, yang juga menjadi nilai jual utama. Vendor perangkat lunak harus mendengarkan dan menanggapi kebutuhan pasar.

Pengguna Web

Pengguna situs yang kami rancang juga mendapat manfaat dari penerapan WS, meskipun mereka tidak menyadarinya! Mungkin mereka secara tidak sadar menggunakan situs yang dikembangkan khusus untuk browser populer saat ini. Jika pengguna ini beralih ke browser lain, mereka mungkin mendapati bahwa pengalaman online tidak lagi menyenangkan karena tag kepemilikan tersebut tidak akan diterima oleh browser baru. Situs yang terstandarisasi dan kompatibel memiliki kinerja yang baik di berbagai browser, baik browser yang ada maupun yang akan datang.

Selain itu, situs web yang mengikuti rekomendasi aksesibilitas akan lebih mudah didekati oleh pengguna yang merasa penjelajahan web tidak memuaskan. Web harus menyediakan kondisi belanja, membaca, dan pencarian yang lebih nyaman bagi mereka yang memiliki gangguan penglihatan atau disabilitas lainnya. Mereka tidak boleh dicegah untuk menjelajahi suatu situs karena situs tersebut menggunakan tag kepemilikan atau teknologi eksklusif lainnya (mengacu pada browser).

Bagaimana kita bisa memastikan penggunaan WS yang benar saat

menggunakan WS

mematuhi

Ini berarti bahwa kita hanya boleh menggunakan elemen dan atribut yang ditentukan dalam spesifikasi dan menghindari penggunaan atribut khusus browser tertentu, seperti tag marquee IE dan tag kedip Netscape. Juga jangan gunakan elemen yang muncul di spesifikasi sebelumnya (seperti HTML 3.2) atau yang dihapus dari spesifikasi selanjutnya.

Membuat dokumen XHTML kanonik

Pada artikel ini, kami akan menggunakan XHTML, jadi kami akan mengikuti rekomendasi XHTML 1.0 W3C [menurut W3C, Rekomendasi berarti spesifikasi]. XHTML pada dasarnya adalah versi terbaru dari HTML, dan dirancang untuk menggantikan HTML, bahasa markup web. Meskipun merupakan varian HTML dari XML, XHTML hampir identik dengan HTML, dengan sedikit perbedaan yang akan kita bahas nanti di XHTML dan Semantik.

Anda dapat menghasilkan dokumen XHTML melalui kotak dialog Dokumen Baru di Dreamweaver (File>Baru...). Pastikan bahwa Halaman Dasar dipilih dalam daftar Kategori, dan kemudian pilih HTML dari daftar Halaman Dasar, seperti yang ditunjukkan pada Gambar 2.1, "Membuat dokumen XHTML baru di Dreamweaver." Anda kemudian dapat memilih jenis dokumen apa pun dari daftar drop-down.

Gambar 2.1: Membuat dokumen XHTML baru di Dreamweaver

Gambar 2.2: Menampilkan dokumen XHTML baru dalam tampilan kode

Klik "Buat" untuk menghasilkan dokumen baru. Klik tombol kode di bagian atas jendela dokumen dan pergi ke "tampilan kode". Anda dapat dengan jelas melihat kode apa yang disertakan dalam dokumen XHTML sederhana. Seperti yang ditunjukkan pada Gambar 2.2, baris pertama dokumen "Tampilkan dokumen XHTML baru dalam tampilan kode"

akan menampilkan konten berikut

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: / /www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Ini

disebut deklarasi tipe dokumen, atau DOCTYPE. Seperti namanya, DOCTYPE mendeklarasikan dokumen Anda - spesifikasi (X)HTML mana yang Anda patuhi. Dalam contoh ini, kami mengikuti XHTML 1.0 Transitional, yang merupakan pengaturan default untuk DW 8. Bagian Transisi memberi kita beberapa informasi tambahan tentang versi XHTML. XHTML1.0 memiliki tiga "rasa": Ketat, Transisi, dan Frameset. DW menggunakan tipe Transisi secara default, dan jika Anda ingin memasukkan bingkai ke dalam dokumen, itu adalah Frameset.

XHTML Strict adalah format XHTML yang paling ketat, seperti yang mungkin bisa Anda tebak. Jenis dokumen Ketat terlihat seperti ini:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Jika

Anda menggunakan DOCTYPE Ketat, maka Anda tidak dapat menggunakannya di dokumen Elemen apa pun (tag) atau atribut yang menyatakan penghentian tidak dapat digunakan dalam bingkai. Elemen yang dinyatakan tidak digunakan lagi akan dihapus di versi XHTML mendatang. Banyak dari elemen ini digunakan untuk mengontrol tampilan halaman, yang dapat sepenuhnya digantikan oleh CSS. Perbedaan terbesar antara Strict dan Transitional adalah ketika menggunakan Strict DOCTYPE, atribut dan elemen yang menurut Anda dapat digunakan untuk kinerja sangat dibatasi.

Catatan: Penggunaan Strict DOCTYPE di DW

DW tidak terlalu ketat dalam memenuhi standar. Jika Anda menggunakan Strict DOCTYPE, berikan perhatian khusus untuk memvalidasi dokumen Anda dan memperbaiki atribut yang tidak teratur. Pada dasarnya, mudah untuk menggantinya dengan CSS.

Frameset DOCTYPE mendukung penggunaan frame. Jika Anda memasukkan frame ke dalam dokumen, DW akan secara otomatis menggunakan jenis ini. Halaman bingkai harus terkait dengan setidaknya dua halaman lainnya, dan tidak ada batasan pada jenis dokumen halaman terkait. Kode Frameset DOCTYPE adalah sebagai berikut:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 4.01 juga menyediakan tiga "rasa" tipe dokumen ini - Transisi, Ketat dan Frameset - mereka beroperasi persis sama dengan DOCTYPE XHTML yang disebutkan di atas. Jika Anda menggunakan salah satu jenis tersebut, Anda harus menunjukkannya dalam dokumen HTML (bukan XHTML). Perbedaan antara HTML dan XHTML akan kita bahas secara mendalam nanti di bagian membuat website.

Asli: Dreamweaver 8 Melakukan Standar ! oleh Rachel Andrew

Disusun: x5