html/css
Membuat Rich Text Editor dalam Situs Web
Pada dasarnya, tidak ada elemen HTML yang dapat membantu user untuk memasukkan tulisan yang mendukung visual formatting alias kita dapat memformat atau mengatur style dari tulisan secara visual (WYSIWIG). Namun seiring berkembangnya kebutuhan dan berkembangnya browser yang digunakan untuk menampilkan file HTML, sebuah text editor yang WYSIWIG (saya sebut saja rich text editor) dapat kita buat.
Perlu diperhatikan juga, fasilitas pembuatan rich text editor ini menggunakan fasilitas yang disediakan oleh browser dan ternyata tidak semua browser menyediakan fasilitas ini. Contoh browser yang memiliki fasilitas ini adalah Mozilla sekeluarga dan Internet Explorer. Selain itu, javascript ikut berperan serta dalam pembuatannya.
Crossbrowser CSS
Bagi yang suka ngutak-atik CSS pasti sudah mengalami masalah dengan kompatibilitas browser. Udah cape2 bikin CSS yang baru dicoba di satu browser ujicoba, pas dicoba di browser lain semua jadi kacau.
Ada 2 hal yang bisa dilakukan untuk mengatasi masalah ini, yaitu:
- Gak peduli mau kompatibel atau ngga, yang penting udah ada browser yang nampilin dg bagus
- Ngutak-atik CSSnya lagi sehingga ok di semua browser
Untuk solusi pertama rasanya usaha berikutnya yang harus dilakukan adalah memaksa user supaya memakai browser yang sama dengan pembuat CSS.
Sedangkan untuk solusi kedua, gw mo berbagi beberapa trik yang gw tau atau yang biasa gw pakai.
Migrasi
Setelah lebih dari satu tahun gw make bBlog sebagai alat bantu tuk nulis blog, gw akhirnya memutuskan untuk pindah ke alat bantu lain yaitu Drupal. Ya, ini emang bukan tuk pertama kalinya gw nginstall Drupal. Sebelumnya gw udah make di bagian situs gw yang lain, yaitu untuk nampung tutorial, hasil ngoding, n hasil tugas kuliah gw. :D
Daftar dua kolom
Untuk membuat sebuah daftar dalam HTML, kita biasa menggunakan element ol atau ul. Elemen ol digunakan untuk membuat daftar terurut (ordered list) sedangkan ul digunakan untuk membuat daftar yang tidak terurut atau tidak memerhatikan urutan (unordered list).
Penggunaan element ol atau ul ini akan menghasilkan suatu daftar yang menurun ke bawah, seperti dicontohkan dalam contoh 1. Kita bisa membuat variasi lain dari penampilan daftar ini, yaitu menampilkan daftar dalam dua kolom. Untuk membuat daftar dalam dua kolom, kita akan menggunakan bantuan dari CSS.
???? Image Replacement
Gw baru aja nyoba2 bikin2 script php lagi. Sebuah script yg bisa ngeluarin gambar berupa tulisan. Tulisannya sendiri dijadiin parameter di script php tsb..
Lalu.. dg javascript, gw ngubah semua tag H2 yg gw pake di bagian kiri, sehingga isinya berubah jadi gambar!
hasilnya? sekarang judul dari tulisan2 gw di blog ini ngga terbuat dari tulisan lagi.. tapi dari gambar!!
duh ngejelasinnya jadi ribet deh nih.. ya liat aja dehh..
CSS emang bisa dianeh2in.. teknik tuk ngereplace text jadi gambar dg CSS aja udah ada namanya segala, yaitu Fahrner Image Replacement. ini murni make CSS doang loh! tuk info lebih lanjut, baca aja http://www.stopdesign.com/articles/replace_text/
sedangkan cara yg gw pake, javascript+php yg bekerja.. sebenernya gw mulai jadi kepengen tuk bikin yg beginian setelah ngeliat www.diki.or.id ..
lalu.. gw juga pernah liat yg gambar pengganti tulisannya dibuat oleh script .. tapi gw lupa ngeliat dmana..
Ganti Template
gw ganti template lagi! yg ini gak murni bikinan gw smua.. gambar yg ada di atas itu hasil nyolong kerjaan orang. hehe.. :P trus kalau ada yg pernah ngeliat layout yg mirip2, jangan heran.. emang gw cuma nyoba2 niru dan kombinasi beberapa kerjaan orang..
IE7
Ada yang suka ngoprek2 HTML+CSS? Apa suka merasa aneh dengan [url=http://www.microsoft.com/ie/]Internet Explorer[/url]?
Kalau saya sendiri memang menganggap IE itu aneh dlm penanganan CSS nya. Dia seperti punya standar sendiri yang ngga ngikutin standar yang ada. Dibandingkan IE, web browser lain seperti [url=http://www.mozilla.org]Mozilla[/url] dan [url=http://www.opera.com]Opera[/url] jauh lebih bagus dalam urusan mengikuti standar yang ada. Kalau standar diikutin kan jadinya kita2 yg make gak ribet. Selain itu, IE juga kurang mendukung CSS versi terbaru. Jadi kalau mau make yang aneh2 jadi susah juga, soalnya IE masih mendominasi pasar web browser.
Untunglah ada orang baik yg membuat sebuah script tuk membuat IE aga lebih ngikutin [url=http://www.w3c.org/Style/CSS/]standard[/url]. Kita cuma perlu nambahin sekitar 3 baris di file HTML yang kita buat. Engga perlu ngoprek2 lagi, atau [url=http://www.quirksmode.org/css/csshacks.html]nambahin yang aneh2[/url] dari CSS yang udah kita buat. Asal CSS yang kita buat udah ngikutin standard, Insya Allah si IE bisa nampilin sesuai standard juga (bukan standard IE!).
Script itu bisa diliat di http://dean.edwards.name/IE7/
Bagi yang belum tau apa sih yang jadi masalah, coba buka http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html dengan IE, Mozilla dan Opera. Setelah itu, coba buka http://dean.edwards.name/IE7/compatibility/complexspiral/demo.html yang merupakan versi yg sudah ditambahkan IE7.