Accordion Dialog Box with JQuery

Posted on December 28th, 2010 in Academic by oki.maulana08

Well, it’s very simple how to make your web look great. One thing that you can do is using accordion dialog box.

Ok, first open notepad or netbeans or aptana studio or something else. Then you write HTML code below.

<html>

<head>

<link rel=”stylesheet” href=”development-bundle/themes/hot-sneaks/ui.all.css”>

<script src=”development-bundle/jquery-1.3.2.js”></script>

<script src=”development-bundle/ui/ui.core.js”></script>

<script src=”development-bundle/ui/ui.dialog.js”></script>

<script src=”development-bundle/ui/ui.accordion.js”></script>

<script>

$(document).ready(function(){

$(“#dialogbox”).dialog();

$(“#main”).accordion();

});

</script>

</head>

<body style=”font-size:65%;”>

<div title=”Accordion Dialog Box”>

<div>

<h2><a href=”#”>Web Designer</a></h2><div>Web designer is the people who design website.</div>

<h2><a href=”#”>Web Programmer</a></h2><div>Web programmer is people who make code for website.</div>

<h2><a href=”#”>Web Administrator</a></h2><div>Web administrator is people who maintenance website everytime.</div>

</div>

</div>

</body>

</html>

Then you must copy javascript for this code.

Put folder development-bundle is same as the place where you save HTML code.

And finish, let’s enjoy.

WPF, Just Code It

Posted on December 28th, 2010 in Academic by oki.maulana08

Ada Ebook bagus nih temen-temen, tentang WPF. Biasanya kita kan membuat button tinggal ketik kode singkat dan jadilah sebuah button yang sederhana tanpa ada seninya. Nah, Disini kita dapat belajar tentang dasar-dasar membuat widget GUI di web, antara lain list box,combo box,dan objek-objek geometri menggunakan XAML. Hasilnya akan jauh berbeda, kita bisa buat button lebih menarik, list box lebih berseni dan kelihat nyaman dan indah untuk dipandang. So, download saja ebooknya di bawah ini.

Ridi Ferdiana ST. MT – WPF Just Code It.

Computer Science, Bogor Agricultural University

Posted on December 27th, 2010 in Academic by oki.maulana08

I don’t understand, why people always say “oh..Computer Science really exist in Bogor Agricultural University ,isn’t it?”

It really exist in Bogor Agricultural University. I’m one of many student in Computer Science departement.

Oke first, i wanna introduce to you, about my lesson.

In third year, i have studied many lesson. And i think it’s so difficult for me.

Software Engineering

My references are Pressman(download), and Head First(download). Beside it, my lessons are :

Computer Graphics

One of my lesson is about Clipping. You can download here.

Quantitative Methods

This is one of lesson (download).

Operating System

My reference is WROX SO.

Artificial Intelegent

This is the great lesson. This lesson motivated me for thinking big in Computer Science.

My reference is Russel-NewEdition. Another references are :

Human and Computer Interaction

HCI is my favourite lesson. I don’t know but I think Mr. Firman is very interactive and kind people. He can make people comfort.

My reference for this lesson is Visualization slide.

Everything about me

Posted on December 27th, 2010 in Academic by oki.maulana08

Name     : Oki Maulana

School   : Computer Science, Bogor Agricultural University

Email     : oki.maulana08@yahoo.com

Facebook   : chox_eagle@yahoo.co.id

How to make stylish table in CSS?

Posted on December 27th, 2010 in Academic by oki.maulana08

Hello guys, I’m student of Bogor Agricultural University. This time, I will share with you about “How to make stylish table in CSS?”

Oke…

  1. First look at the HTML code below!

<table width=”446″ border=”1″ align=”center” class=”gridtable”>
<tr>
<th width=”164″><div align=”center”>Name </div></th>
<th width=”190″><div align=”center”>Address </div></th>
<th width=”70″>School</th>
</tr>

<tr>
<td>Oki Maulana</td>
<td>Bogor</td>
<td>Bogor Agricultural University</td>
</tr>
</table>

  1. And then look at the CSS code below!

<style type=”text/css”>
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>

Ok! You can put the CSS code in html file or you put it in another file (extension must be .css).

Tugas IMK : Review Blog Situs “Visualization information”

Posted on December 9th, 2010 in IMK,Visualization by oki.maulana08

Infosthetics.com

Infosthetics.com adalah salah satu situs yang menampilkan visualisasi informasi yang sangat menarik. Mengapa? Karena dia menggunakan beragam bentuk visualisasi untuk merepresentasikan informasi sehingga membuat saya selaku pengunjung website tertarik untuk mengetahui informasi apa yang terkandung dalam visualisasi tersebut.

Meskipun masih terdapat kekurangan dalam antarmuka website ini, tidak ada header yang cukup jelas,tidak ada breadcrumb (penanda lokasi saat itu) serta penempatan fungsi search yang tidak sesuai, tetapi website ini sangat menarik jika ditanya masalah visualisasi informasinya.

(picture 1.1)

Gambar di atas adalah salah satu visualisasi informasi dari situs Infosthetics.com yang berisi informasi atau data dari WikiLeaks Cable Gate. Uniknya data tersebut direpresentasikan dengan lingkaran-lingkaran yang berbeda shape dan colornya. Sedangkan gambar yang satu lagi direpresentasikan oleh lingkaran yang sama warnanya tetapi ada tambahan karakter(huruf dan angka). Data tersebut sangat menarik daripada hanya sebatas tabel atau bahkan kata-kata saja.

(picture 1.2)

Berbeda dengan picture 1.2 yang menjelaskan tentang Data Visualization. Data-data dan keterkaitan antar data direpresentasikan dengan warna dan kata-kata serta memainkan peletakan antar kata yang dapat diartikan hubungan antar kata tersebut.

berikut ini screenshot-screenshot lain dari situs ini :

Mungkin sekian saja review dari saya.

terima kasih.