Anatomy of a WordPress Theme

Anatomy of a WordPress Theme

One of the Infographics* about wordpress theme structure :mrgreen:. Enjoy!

View Full Size

*Information graphics or infographics are graphic visual representations of information, data or knowledge. These graphics present complex information quickly and clearly, such as in signs, maps, journalism, technical writing, and education. With an information graphic, computer scientists, mathematicians, and statisticians develop and communicate concepts using a single symbol to process information.

Firefox 8 Now Available!

Indeed there is no anything that stands out in this 8 version. The most important is to improve plugin installation, Twitter search, and customization of current  reopen tabs.

Firefox 8 Features

  • Add-ons installed by third party programs are now disabled by default
  • Added a one-time add-on selection dialog to manage previously installed add-ons
  • Added Twitter to the search bar
  • Added a preference to load tabs on demand, improving start-up time when windows are restored
  • Improved tab animations when moving, reordering, or detaching tabs
  • Improved performance and memory handling
  • Added CORS support for cross-domain textures in WebGL
  • Added support for HTML5 context menus
  • Added support for insertAdjacentHTML
  • Improved CSS hyphen support for many languages
  • Improved WebSocket support
  • Fixed several stability issues

To download it, you can go straight to firefox.com. If you want a portable one, you can go to portableapps.com.

Google Page Speed Online Test

Adakah yang pernah membuat web?

Kemudian web yang dibuat berjalan online?

Pernahkah mengukur menggunakan speed test untuk mengakses halamannya?

Sedikit informasi saja, ternyata Google sudah menyediakan beberapa tools yang berkaitan dengan kecepatan web.  Dan banyak juga developer lainnya yang menyediakannya. Misal yg ada di halaman ini; http://code.google.com/speed/tools.html .

Kali ini saya akan membandingkan web yang sudah saya buat bersama Sisfo Development Team IT Telkom dengan beberapa web populer lain, seperti social network yg usernya sudah tidak diragukan lagi banyaknya. Perbandingan ini berdasarkan score yg diberikan oleh Google melalui Page Speed Online-nya. Cekidot! 😀

academic.ittelkom.ac.id
akademik.ittelkom.ac.id

Kedua domain di atas merupakan aplikasi yg sama. Codename: iGracias. Sistem informasi akademik paling baru untuk IT Telkom. Memperoleh score 82 dari 100 untuk academic dan 79 dari 100 untuk akademik. Continue reading

Membuat Search Engine Dengan Google CSE

Google Custom Search Engine adalah salah satu fasilitas yang ditawarkan oleh Google untuk membuat search engine dengan mudah dan cepat. Jadi tidak perlu capek – capek ngoding lagi.

  1. Masuk ke  http://www.google.com/cse/ lalu klik Create a Custom Search Engine.
  2. Login ke gmail.
  3. Setelah selesai melakukan login maka akan muncul beberapa option yang harus kita isi. Basic information merupakan pengaturan untuk memberikan nama pada search engine yang akan kita buat, deskripsinya, lalu bahasa yang digunakan.
  4. Selain itu juga mengisi opsi untuk web mana saja google cse akan digunakan.
  5. Lalu pilih edisi dari google cse, apakah edisi standard (free) atau yang tidak free ($100 per tahun).
  6. Style dari form search dan result search juga bisa dikustomisasi sesuai keinginan.
  7. Setelah itu, kita tinggal copy paste source code yg ada di website kita.
  8. Selesai. Anda bisa menikmati hasil pencarian google sesuai website anda.

10+1 Add-ons Mozilla Firefox untuk Web Developer

10 Firefox Add-Ons Terpopuler Untuk Web Developer

Inilah daftar 10 Firefox add-on terpopuler bagi para web developer dari hasil penelusuran di forum, blog, dan Twitter.

Setiap plug-in pada daftar berikut ini menawarkan utility luar biasa bagi para developer yang menginstallnya di browser mereka. Bahkan, sebagian add-on tsb dianggap wajib. Kesemua plug-in ini dapat didownload gratis.

1. Firebug

Firebug 10 Firefox Add-Ons Terpopuler Untuk Web Developer

Dengan Firebug, Anda bisa mengedit CSS, HTML dan JavaScript yang ada pada web page tanpa harus pindah dulu ke aplikasi lain. Perubahan dan previewnya dapat dilihat real-time. Add-on ini juga memiliki fitur analisis aktifitas jaringan dan profiler kinerja JavaScript. Seperti Firefoxnya sendiri, Firebug dapat diextend dengan plug-in yang menambahkan fitur baru.

2. Web Developer

Web Developer 10 Firefox Add-Ons Terpopuler Untuk Web Developer

Web Developer merupakan dynamic extension paling powerful pada daftar ini; WD menambahkan toolbar yang memungkinkan anda melakukan banyak hal yang bermanfaat.

Anda bisa non-aktifkan Java, non-aktifkan atau lihat cookies, nonaktifkan CSS, lihat styles, lihat info detail form, non-aktifkan images, temukan broken images, lihat JavaScript, tampilkan semua jenis info behind-the-scene, edit HTML, tampilkan elemen tersembunyi, ubah resolusi window, validasi code dan banyak lagi. Continue reading

Website untuk Membuat Kombinasi Warna

color combination

Memilih warna yang tepat merupakan hal yang sangat penting saat mendesain suatu proyek web. Sebagai contoh, CSS Juice sebagian besar menggunakan putih dan abu-abu  untuk body dan hitam untuk header dan footer. Terdapat beberapa layanan aplikasi warna online di internet untuk membantu anda menentukan kombinasi warna yang dapat memperindah hasil desain anda.

1. Color Explorer

Satu set perangkat yang termasuk didalamnya warna sepadan dan koleksi warna. Dikembangkan dengan baik dan memiliki antarmuka yang spesial.

2. Software Color Palette dari ColourLovers

Termasuk didalamnya perlengkapan foto untuk mengambil jenis warna dari suatu gambar, color picker yang canggih dan color theory wheel untuk memberikan anda inspirasi, dan anda dapat menyimpan warna-warna yang anda butuhkan.

3. Colour Lovers

Website yang dikembangkan oleh Darius A Monsef IV. Pengunjung dapat mencari, me-rating, memberikan review dan mencintai warna dengan jumlah kombinasi yang sangat luas. Mereka telah menciptakan garis warna yang memikat, dalam warna dasar yang tampil menarik di berbagai ukuran.

4. Contrast-A

Anda dapat bereksperimen dengan berbagai kombinasi warna yang bervariasi, me-review warna anda, mengakse dan menciptakan palet warna sendiri.

5. Daily Colorscheme

Dapat membantuk anda menjelajah kombinasi warna baru yang mungkin belum anda pikirkan, juga merupakan sumber inspirasi warna yang sangat bagus.

6. Adobe Kuler

Aplikasi website gratis untuk themes yang dapat memberikan inspirasi bagi desain anda. Apapun yang anda ciptakan, dengan Kuler anda dapat bereksperimen dengan cepat dengan berbagai variasi warna atau browse dari ribuan koleksinya. Continue reading

CSS 2.1, CSS 3 dan HTML 5 Help Cheat Sheets (PDF)

Sekarang, kita bisa cepat untuk melihat secara keseluruhan properti apa saja yg ada di CSS 2.1, CSS3 dan HTML 5, karena sudah disediakan cheat sheets yg mantap. Jadi bisa belajar secara keseluruhan dan maksimal :D. Selamat Menikmati!!!

The CSS 2.1 Help Sheet covers Syntax, Font, Text, Margins, Padding, Border, Position, Background, List, Media Types and Keywords. The CSS 3 Help Sheet contains code snippets for Rounded Corners, Box Shadow, Multiple Columns, Text Shadow, RGBa, Font Face (actually, not the CSS3 property, but still include for the sake of usefulness), Box Sizing, Box Resize, Outline and Gradients.

css preview
css 3 help sheet preview

Mengaktifkan mod_rewrite pada Ubuntu 9.10

Mod_rewrite dibutuhkan untuk melakukan penulisan ulang URL berdasarkan regular-expression parser secara on the fly. Manipulasi URL bisa dilakukan untuk server variable, environment variables. HTTP headers, time stamps dan lain-lain. mod_rewrite beroperasi pada URL lengkap (termasuk bagian path-info) baik dalam konteks per-server (httpd.conf) dan konteks per-directory (.htaccess).

Pengaktifan mod_rewrite ini sangat terasa jika kita ingin menginstall suatu cms di localhost. Jika mod_rewrite belum diaktifkan, biasanya akan ada masalah dalam instalasi.

Langkah-langkah mengaktifkan mod_rewrite di ubuntu :

1. Aktifkan mod_rewrite dengan perintah di terminal/console:

sudo a2enmod rewrite

dengan perintah diatas, maka kita bisa melihat file rewrite.load di /etc/apache2/mod-enabled dan untuk lebih meyakinkan lagi, anda bisa membuat file php yang isinya : <?php phpinfo(); ?>

2. Edit file /etc/apache2/site-enable/000-default Continue reading

5 Javascript Library untuk Mempermudah Webdesign

Beberapa javascript library di bawah ini bukan merupakan library javascript yg besar seperti jQuery, tetapi lebih kecil dan lebih spesifik.

1. Memperbaiki PNG di IE6 dengan DD_BelatedPNG

DD_belatedPNG diciptakan untuk tujuan tunggal memungkinkan PNGs alpha-transparan untuk digunakan dalam IE6 tanpa menggunakan filter AlphaImageLoader milik Microsoft.

Penggunaan :

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>  
<![endif]--> 

ditambah

<script type="text/javascript">  
  DD_belatedPNG.fix(".linkButton");  
</script>

Download

2. Gunakan font dengan Cufon

Script ini semacam script yg berguna untuk melakukan perubahan font di element yg dapat kita tentukan, seperti CSS. Namun, kelebihannya yaitu browser akan dapat langsung menampilkan jenis font Cufon :D.

Penggunaan :

<script type="text/javascript" src="cufon.js"></script>  
<script type="text/javascript" src="Breip_500.font.js"></script>  

cara memanggilnya :

<script type="text/javascript">  
  Cufon.replace('h1.replacedFont');  
</script> 

dengan Cufon kita juga bisa menggunakan multiple font :mrgreen:.

Download

Continue reading

CSS3 Solutions for Internet Explorer

Mungkin bagi pengembang web, CSS3 adalah tren yg masih hot saat ini. Namun, seperti biasa jika membahas masalah web, pasti akan otomatis berkaitan dengan browser dan biasanya browser yg paling `diistimewakan` adalah IE :mrgreen:. Dengan menggunakan CSS3 pengembang web bisa mengimplementasikan beberapa teknik, diantaranya mengurangi penggunaan gambar², nonsemantic markup, dan javascript yang kompleks. Dan sepertinya versi terbaru dari IE pun belum support/mendukung terhadap fitur CSS3 :(.

Namun, seorang developer web harus bisa menghadapi kondisi seperti ini, termasuk compatibility terhadap berbagai browser.

Di bawah ini beberapa solusi/syntax yg bisa digunakan untuk mengatasi masalah seperti di atas.

Opacity / Transparency

#myElement {

opacity: .4; /* other browsers */

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* this works in IE6, IE7, and IE8 */

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* this works in IE8 only */

}

Continue reading