Redesign Halaman Login Sisfo STMIK Nusa Mandiri

So, today I have spare time. Jadi daripada otak tidak terasah lebih baik melakukan sesuatu yang berguna buat otak. Ceritanya dulu saya pernah kuliah IT (jadi malu saya) di sebuah universitas swasta bernama STMIK Nusa Mandiri. Tiap kali mau ujian, mau lihat nilai, mau lihat jadwal dan segala macam keperluan kemahasiswaan lainnya saya harus melihat halaman ini:

Sebetulnya sudah bagus. Halaman ini mudah dipahami dan fungsional.

Namun dari segi usability (asek sok keren bgt ini yg nulis), halaman ini kurang baik. Pengumuman ditampilkan di bagian atas melalui mekanisme scroll vertikal. Kenapa kurang baik? Jika ingin melihat pengumuman yang relevan, user atau mahasiswa harus menunggu. Bagi yang paham mungkin bisa menekan control+U dan langsung melihat sourcenya. Tapi itu kan jadinya ga seru dan tujuan website sebagai penyedia informasi kurang kena sasaran.

Dari segi tampilan keseluruhan, rapi. Tapi saya akui website ini kurang kosmetik dan sedikit kaku. Kadang-kadang kalau lagi mau ujian online melihat tampilan putih ini suka stress. Atau ketika pengumuman ujian. Tampilan website ini kadang-kadang bikin deg-degan. Tapi yang lebih deg-degan lagi kalo ga bisa login sih… Eaaaa, maaf nggak nyindir loh.

Kemudian terakhir, penggunaan tag html dan kawan-kawannya. Siapa juga yang peduli sama kode, yang penting tampilan cantik. Bagi saya inner beauty sama pentingnya dengan outer beauty. Jadi kalau tampilan bagus tapi hati masih galau, mendingan nonton kuliah Shubuh dulu pagi-pagi. Nah jadi ceritanya page ini masih pakai tag
. Ugh please dehh, hari genee bikin layout pake table? Emang kenapa pake tabel? Gapapa juga, cuma itu jadinya… gini…

Jadi dalam rangka menghabiskan waktu, saya buat deh halaman login yang baru. Mungkin lebih bagus, mungkin juga lebih jelek. Baiklah, silakan dilihat:
Baca lebih lanjut

Another Small Project Built With Foundation

Banyak framework yang tersedia membuat disain semakin mudah. Baru-baru ini saya menggunakan Foundation untuk membangun template wordpress. Sebetulnya saya suka yang hitam, tapi rekan kita maunya yang putih dan mungkin saja beliau mewakili seluruh user yang suka background putih and I think everyone would agree that white is always neutral, so no argument there.

Kalo mau liat yang sudah di porting ke wordpress ada di http://beritatrans.com.

Draft Hitam with Foundation

Draft Putih with Foundation

Foundation, Framework CSS untuk Disain Web Dengan Cepat

Karena sekarang musimnya framework untuk rapid development plus banyak klien yang bawel minta cepet dan bagus, kita ikut-ikutan juga deh nulis tentang framework.

Foundation adalah framework untuk membuat disain web responsive dengan cepat. Cepat disini bukan berarti instan kayak popmie. Mengetahui dasar HTML dan CSS akan sangat membantu menggunakan framework ini. But fear not, foundation ini cuma ready made CSS dan javascript untuk membantu para disainer. Yep, thats right, designer, not engineer. Belajar foundation tidak akan memakan waktu lama. Easy as a pie.

Mungkin ada yang sudah tahu responsive web design, tapi mungkin banyak juga yang belum. Responsive website singkatnya adalah sebuah website yang secara responsive mengikuti lebar browser dan/ atau monitor tanpa harus melakukan request tambahan ke server. Atau boleh juga dibilang client side mobile detect. Untuk lebih jelasnya, berikut ini adalah beberapa contoh web responsive yang manis dan sedap dipandang.

Coba buka di browser kesayangan anda (misalnya Google Chrome atau Mozilla Firefox). Kemudian resize jendela browser. Ajaib! websitenya langsung mengikuti lebar jendela (tolong dekatkan kameranya). Manis kan? Kalau anda punya Android/Tab atau iPhone/Pad, atau err… Blackberry, tentunya harus yang paket full (damn, I hate Blackberry and its stupid service), coba browsing disitu. Tampilannya pasti mengikuti lebar screen smartphone anda kan? Coba juga mode landscapenya. Nice kan?

Okay, back to foundation. Nah, foundation ini memungkinkan anda untuk membuat website responsive seperti diatas. Kalau sudah lancar, anda bahkan bisa membuat kerangkanya hanya dalam waktu kurang dari 10 menit. Mudah-mudahan postingan berikutnya saya bikin tutorial quick and easy membuat draft website dari Foundation ini.

Contoh Draft Website dengan Foundation

Contoh Draft Website dengan Foundation

Download foundation di:
http://foundation.zurb.com/

Disitu tersedia dokumentasinya super lengkap. Tapi jangan kuatir nanti saya juga tulis tutorialnya yang super simple.

Using definition list to Generate WordPress Pages

To generate wordpress page, normally we use:

<?php wp_list_pages(); ?>

But that code also automatically generate <li>. What if you want to use definition list to generate wordpress page like this?

<dl class="nice vertical tabs">
  <dd><a href="#">Ekonomi</a></dd>
  <dd><a href="#">Politik</a></dd>
  <dd><a href="#">Korupsi</a></dd>
  <dd><a href="#">Sports</a></dd>
  <dd><a href="#">Nasional</a></dd>
  <dd><a href="#">Hiburan</a></dd>
  <dd><a href="#">Megapolitan</a></dd>
  <dd><a href="#">Internasional</a></dd>
  <dd><a href="#">Teknologi</a></dd>
  <dd><a href="#">Kesehatan</a></dd>
  <dd><a href="#">Wisata</a></dd>
  <dd><a href="#">Syiar</a></dd>
  <dd><a href="#">Renungan</a></dd>
  <dd><a href="#">Kopi Tumpah</a></dd>
  <dd><a href="#">Terbit Foto</a></dd>
</dl>

Easy, use get_pages and loop it. Like this:

<dl>
 <?php 
  $pgs = get_pages();
  foreach ($pgs as $pg) {
     $title = $pg->post_title;
     $link = get_page_link($pg->ID);
  ?>
  <dd><a href="<?php echo $link ?>"><?php echo $title ?></a></dd>
<?php } ?>
</dl>

I recently use foundation framework and the code proved to be quite useful with foundation’s vertical tab.

Further Reading: