Dengan banyaknya sumber daya dan komponen open source yang tersedia di web saat ini, cara pengembangan situs hari ini sudah sangat berbeda dengan beberapa tahun yang lalu. Menggunakan komponen-komponen dasar yang tepat tidak hanya dapat menghasilkan situs yang jauh lebih terstruktur dan fungsional, tetapi juga dapat menghemat banyak waktu Anda.
Sejak diluncurkannya udaramaya 2.0 kami banyak menerima email menanyakan CMS yang dipakai dan bagaimana cara kami mengembangkan udaramaya. Email-email ini sudah kami jawab, tetapi karena tetap saja mengalir masuk dari waktu ke waktu, saya rasa ada baiknya juga kalau kami menulis sebuah artikel untuk menjelaskan dengan lebih detil tentang berbagai komponen, alat maupun beberapa sumber daya lainnya yang dapat menghemat waktu Anda dalam mengembangkan situs berbasis PHP.
Strategi penggunaan komponen open source sangat penting untuk udaramaya yang tidak memiliki anggota yang bekerja penuh waktu dalam mengembangkan udaramaya. Berikut ini adalah berbagai komponen open source maupun sumber daya lain yang kami gunakan untuk membuat udaramaya dengan cepat.
PHP
PHP Framework: CakePHP yang ringan, mendukung model pemrograman MVC, caching, mudah pakai dan membawa object oriented programming ke PHP. Sangat ideal untuk saya (dan Anda) yang sering menulis kode secara berantakan dan tidak terstruktur. Lihat alternatif lainnya di sini. Dokumentasi: apabila Anda ingin mulai belajar pemrograman PHP atau hanya sekedar mengulas kembali dasar-dasar pemrograman PHP, tutorial Zend adalah yang terbaik.
CSS
CSS Framework: YUI Grids CSS, satu lagi komponen dari Yahoo! UI Library yang kami gunakan untuk membentuk pondasi layout udaramaya yang terdiri dari header, footer, kolom utama dan sidebar kanan, dengan sedikit modifikasi tentunya. Belakangan ini juga muncul sebuah framework bernama 960 Grid System yang sangat saya rekomendasikan untuk membuat situs baru. Apabila kedua solusi ini masih tidak cocok untuk kebutuhan Anda, coba juga alternatif lainnya. CSS Reset: YUI Reset CSS — salah satu komponen dari Yahoo! UI Library yang menghapus semua styling default dari berbagai browser yang tidak konsisten. Sebuah CSS Reset adalah komponen pertama yang selalu kami pakai dalam setiap pengembangan web. Alternatif CSS Reset lain dapat Anda lihat dari sini.
Kompresi: jangan lupa untuk terlebih dahulu meng-optimisasi CSS Anda YUI Compressor sebelum dipakai di situs. sushi juga sebelumnya telah menuliskan sebuah artikel tentang 23 alat untuk mengoptimisasi CSS.
Lain-lain:
- W3Schools: tempat terbaik untuk mulai mempelajari CSS, juga memiliki salah satu dokumentasi CSS terlengkap di web.
- Dua kesulitan utama saya saat belajar CSS adalah mengerti konsep positioning di CSS (static, relative, absolute, relative + absolute dll) dan cara kerja elemen float. Dua tutorial ini sangat berguna untuk mengerti konsep dan fundamental CSS: Learn CSS Positioning in Ten Steps dan Floatutorial.
- Situs terlihat berbeda di IE 6? Kesulitan melakukan centering atau vertical align di tampilan berbasis CSS? Kemungkinan besar semua masalah CSS Anda akan terjawab di Using CSS to Fix Anything: 20+ Common Bugs and Fixes.
- 53 Teknik CSS paling berguna dari Smashing Magazine.
JavaScript
Seperti yang Anda tahu, kami sangat memperhatikan efisiensi dan optimisasi situs sehingga di bagian ini Anda akan menemukan solusi-solusi JS dengan tingkat efisiensi sekaligus fungsionalitas tinggi.
JavaScript Framework: mungkin beberapa dari Anda masih ingat kalau udaramaya 2.0 diluncurkan dengan beberapa efek JavaScript. Walaupun jQuery belakangan ini sangat populer, apabila Anda percaya diri dengan kemampuan coding Anda (dan senang bergabung dengan komunitas web elit), Mootools adalah rekomendasi kuat saya untuk membuat situs kaya efek tanpa terlalu mengorbankan efisiensi. Tertarik? Ikuti tutorial yang menjelaskan beberapa fungsi dasar Mootools.
Zebra Tables: Table Ruler adalah skrip ringan untuk membuat tabel yang lebih mudah dibaca dan cantik.
JS-Kit: untuk Anda yang malas membuat sistem komentar, polling, rating dan lain-lain. Sebenarnya saat pertama kali mengimplementasikan sistem komentar ini ada beberapa pengunjung yang melihat perlambatan di udaramaya yang selalu memeriksa jumlah komentar artikel dari server JS-Kit. Tetapi sekarang hal ini sudah bukan menjadi masalah lagi karena kami telah memodifikasi sedikit kode sumber JS-Kit untuk menyimpan jumlah komentar di server kami sendiri.
Efek-efek JS ringan: apabila Anda mencari beberapa efek yang sangat ringan untuk mempercantik situs Anda (contohnya sliding menu berita terpopuler yang hanya menggunakan JS 1KB), kunjungi juga blog Leigeber.
Kompresi: dari pengalaman saya, JavaScript Packer dari Dean Edwards memberikan tingkat kompresi yang terbaik.
Lain-lain:
- Apabila Anda ingin memulai belajar pemrograman JavaScript, AppJet memiliki kursus online interaktif yang sangat berguna.
- Smashing Magazine juga memiliki kumpulan sumber daya JavaScript dan AJAX yang sangat mengagumkan.
- Jangan lupa bahwa Google menawarkan jasa JavaScript library hosting gratis untuk jQuery, prototype, script.aculo.us, Mootools dan dojo yang dapat Anda gunakan untuk mempercepat waktu load situs Anda.
Aplikasi Penunjang dan Lain-lain
Forum: phpBB, aplikasi open source yang paling banyak dipakai.Source code editor: Notepad++ yang gratis dan open source.
Mockup dan grafik: Adobe Illustrator dan Photoshop untuk membuat prototipe tampilan dan image editing, masih belum menggunakan open source untuk dua aplikasi ini :(.
Optimisasi: artikel ini membahas beberapa teknik optimisasi yang paling efektif. Apabila tertarik untuk lebih mempercepat situs lagi, baca juga dokumentasi Yahoo tentang cara terbaik membuat situs berkinerja tinggi.
Firefox extention: baca artikel aerialsky tentang extension Firefox yang dapat membantu proses pengembangan web Anda.
Menguji kompatibilitas dengan IE: dengan banyaknya jenis browser yang dipakai hari ini sangatlah penting untuk membuat situs yang tampil konsisten di semua browser. IE6, IE7 dan IE8 masing-masing memiliki rendering engine yang berbeda, dan cara termudah untuk menguji tampilan di semua browser ini adalah menggunakan IETester yang menyediakan IE8 beta 1, IE7 IE 6 dan IE5.5 sekaligus.
Apabila ada hal lain yang ingin Anda ketahui, jangan ragu-ragu untuk bertanya. Semoga membantu.
Cetak
Artikel Lain :