CSS3 Accordion Tanpa JavaScript

05Nov11

Masih terkait dengan postingan CSS1K yang lalu, jika anda melihat demo CSS saya yang berjudul “1024-bytes” efek visualnya memang sangat terpengaruh dari efek accordion.

Biasanya, untuk membuat efek visual seperti accordion ini perlu digunakan JavaScript dikarenakan efek animasi yang tidak dimiliki CSS2.1, namun seiring perkembangannya khususnya dengan hadirnya fitur “transition” di CSS3 maka sebuah komponen accordion dapat dibuat murni menggunakan CSS.

Meski demikian terdapat beberapa keterbatasan daripada pembuatan accordion menggunakan CSS:

Bahwa pada dasarnya CSS tidak memiliki event listener untuk mouse click, namun bukan tidak ada cara sebenarnya, untuk menyiasati event click ini bisa digunakan trik yang memanfaatkan :target selector, hanya saja dengan syarat tiap elemen dari accordion memiliki nilai attribute href yang unik (itulah mengapa pada demo CSS saya accordionnya bereaksi pada event mouse hover saja karena markup HTML-nya sudah ditentukan dari sananya, tidak bisa diubah).

Kemudian pula, accordion yang dibuat menggunakan murni CSS ini adalah bersifat fixed (tidak fluid/responsive) dikarenakan nilai ukuran tidak dapat berdasar proporsi/perbandingan ukuran dengan elemen parentnya (yang kalau menggunakan JavaScript ini mudah saja dihitung) namun ditentukan besarnya secara fix.

Terakhir, tentu saja tidak semua browser mendukung fitur-fitur CSS terbaru ini, karena browser-browser lama belum memiliki implementasi CSS3. Berdasarkan data dari Mozilla (https://developer.mozilla.org/en/CSS), berikut daftar fitur yang didukung dan versi browsernya:

“transition / -webkit-transition / -moz-transition” property:
Chrome 1.0+, Safari 3.0+, Firefox 4.0+, Opera 10.5+, IE?

“:target” selector:
Chrome 1.0+, Safari 1.3+, Firefox 1.3+, Opera 9.5+, IE 9+


Filed under: CSS, Tips 'n trik, Tutorial, Web Development   |  1 Comment
Tag:, , ,

Tips & Trik Minimisasi CSS ala CSS1K

22Okt11

Jika anda mengikuti perkembangan dunia persilatan, eh, maksud saya.. perCSSan, mungkin pernah mendengar CSS1K, apa itu? CSS1K merupakan sebuah situs yang diinisiasi oleh Jacob Rask (seorang software developer di Opera) yang dimaksudkan untuk mendemonstrasikan kemampuan layout CSS (mirip-mirip CSS Zen Garden) namun dengan ukuran yang hanya 1KB (mirip seperti kontes JS1K). Adalah sebuah tantangan tersendiri tentunya untuk bisa membuat sebuah visualisasi kreatif atas sebuah struktur HTML tertentu namun dengan jumlah karakter CSS yang dibatasi maksimum sebanyak 1 Kibibyte. Dengan 1 Kibibyte sama dengan 1024 bytes dan 1 karakter menghabiskan 1 byte, maka batasannya adalah 1024 karakter, sebuah jumlah yang sedikit dibandingkan ukuran stylesheet pada umumnya.

Diantara demo yang ada, "Typhon" by eswat, merupakan salah satu tema favorit saya

Setiap orang boleh berpartisipasi dengan mengirimkan tema CSSnya melalui email atau github, saya sendiri mensubmitnya lewat pull request di github ke https://github.com/jacobrask/CSS1K/ karena kebetulan punya akun github dan lebih praktis saja rasanya. Bagaimana demonya? bisa dilihat di situs CSS1K, silakan cari yang mana hehe.. :D  Prototip CSS yang saya buat awalnya memang jauh lebih besar dari 1024 bytes, wajar karena banyak elemen yang distyle sedemikian rupa, sehingga akhirnya harus memutuskan untuk menghilangkan banyak rule yang sebenarnya menarik namun tidak terlalu berdampak pada konsep desain yang saya buat secara keseluruhan. Setelah itu dirasa tidak dapat dikurangi lagi namun masih belum memenuhi batas 1K, masih ada beberapa cara yang bisa dilakukan untuk meminimisasi ukuran CSS, berikut saya rangkumkan diantaranya:

1. Satukan beberapa selector yang sebagian besar atau seluruh nilai propertiesnya redundant

Sebagai contoh, lihat kesamaan rule antara kedua selector ini:

h1 {
    color: red;
    font-weight: bold;
    text-align: center;
}
h2 {
    color: blue;
    font-weight: bold;
    text-align: center;
}

dengan menyatukan kesamaannya, kita dapat menyederhanakannya menjadi:

h1, h2 {
    color: red;
    font-weight: bold;
    text-align: center;
}

h2 {
    color: blue;
}

2. Manfaatkan CSS shorthand untuk menyatukan properties setipe yang bisa disatukan

Beberapa shorthand antara lain font, background, margin, padding, list-style, dst. Sebagai contoh:

font-family: sans-serif;
font-size: 12px;
line-height: 20px;

padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 10px;

dapat disederhanakan menjadi cukup

font: 12px/20px sans-serif;

padding: 5px 10px 15px;

3. Gunakan selector equivalen yang terpendek yang paling mungkin

Ada banyak cara untuk menunjukkan sebuah elemen, apakah itu melalui id, class, atau attribute. Gunakan mana yang paling pendek diantara kesemuanya. Sebagai contoh misalkan ada sebuah elemen HTML seperti ini

<a id="faisalman" class="anchor" href="#">a link</a>

pada CSS kita dapat menunjukkan elemen ini dengan banyak cara

#faisalman {}
a.anchor {}
a[href="#"] {}
a[customattr="apapunlah"] {}

kita dapat memilih salah satu diantara kesemuanya, meskipun tidak selalu yang terpendek bisa dipilih karena tergantung lingkup selector yang diinginkan juga.

4. Hapus semicolon paling akhir di setiap rule

Titik koma di akhir bersifat optional, sehingga pada contoh di bawah ini

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
}

kita bisa hilangkan tanda titik koma di ujungnya menjadi

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent
}

5. Hapus whitespace yang tidak perlu

Spasi dianggap sebagai sebuah karakter yang termasuk dalam 1KB, karena itu salah satu cara termudah untuk meminimisasi adalah dengan meminimalkan penggunaan spasi. Sebagai contoh

h1 {
    margin: 0 5px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent
}

bisa dituliskan menjadi

h1{margin:0 5px;padding:0;border:0;outline:0;background:transparent}

namun perhatikan bahwa ada spasi yang tidak boleh diabaikan karena untuk memisahkan 2 nilai seperti pada property margin di atas.

6. Unit dengan nilai 0 tidak perlu menggunakan satuan px

Sebagai contoh

box-shadow: 0px 0px 1px #000;

cukup dituliskan dengan

box-shadow: 0 0 1px #000;

7. Angka 0 di depan titik boleh tidak dituliskan pada unit bertipe floating point

sebagai contoh

transition: all 0.1s linear;

cukup dituliskan tanpa angka 0

transition: all .1s linear;

8. Gunakan list-style dibandingkan list-style-type jika tidak menggunakan custom image atau posisi pada list

Masih berhubungan dengan CSS shorthand, jika kita hanya menset nilai tipenya

list-style-type: none;

cukup tuliskan shorthandnya saja

list-style: none;

9. Gantikan nilai none dengan 0 dimana bisa

Salah satunya pada property border, dimana kita dapat menggantikan

border: none;

dengan

border: 0;

karena pada property border, masih berhubungan dengan bahasan CSS shorthand, keduanya merujuk pada property yang berbeda, dimana

border: none;

merupakan kependekan dari

border-style: none;

sedangkan

border: 0;

merupakan kependekan dari

border-width: 0;

Namun karena pada akhirnya keduanya menghasilkan efek yang sama, menggunakan 0 jelas lebih singkat dari none bukan?

10. Persingkat nilai hexa warna hingga ke 3 digit terdekat

Untuk menghemat karakter kita bisa melakukan antara lain dengan mengubah ke nilai terdekat yang sama untuk setiap #RRGGBB sehingga cukup dituliskan #RGB, tentu saja dengan kompensasi berupa warna yang tidak sesuai asalnya lagi meskipun mirip. Sebagai contoh

color: #f3e597;

nilai tiap warna terdekatnya bisa kita tuliskan menjadi

color: #ffee99;

sehingga cukup dituliskan nilai ekuivalennya

color: #fe9;

Selain itu, yang menarik ada definisi warna yang cukup singkat yaitu warna merah dimana kita cukup menuliskan

color: red;

lebih singkat penulisannya (3 karakter) dibandingkan jika kita menuliskan nilai hexanya (4 karakter) yaitu

color: #f00;

11. kalau jumlah direct child hanya 2, kita bisa mengganti last-child selector dengan adjacent selector

Misalnya, jika a sebagai child dari li hanya berjumlah 2, maka

li > a:last-child { }

adalah equivalen dengan

li > a+a { }

12. kalau jumlah direct child hanya 1, cukup ganti tipe elemen child tersebut dengan tanda bintang saja

Karena tipe child sudah dapat dipastikan, kita tidak perlu menuliskannya, sehingga

article > section:hover { }

secara pasti bisa kita ganti dengan

article > *:hover { }

13. Dan lain-lain

Masih banyak lagi sebenarnya tips lain yang mungkin belum tercakup disini hanya saja belum kepikiran.. :P Akhirul kalam, mohon maaf kalau ada salah-salah kata, dan kalau ada yang ingin berbagi trik-trik lain dalam hal menghemat karakter CSS silakan tambahkan lewat kolom komentar dibawah ;)

–

Beberapa referensi dan tautan lain yang mungkin berhubungan dengan bahasan ini:
- CSS1K @Github
- The 30 CSS Selectors you Must Memorize
- Introduction to CSS Shorthand


Filed under: CSS, Tips 'n trik, Web Development   |  Leave a Comment
Tag:, , , , ,

This Blog is Not Dead –yet

02Sep11

Satu tahun lebih empat bulan sudah blog ini ditelantarkan, selama itu pula praktis blog ini hanya mengapprove komen-komen yang termoderasi dan belum bisa membalas satu-persatu selain karena memang sangat banyak, malas pula hehe :D kalau ada yang mau bales-balesin sih saya akan sangat berterima kasih dan sebagai gantinya akan saya berikan ucapan terima kasih :lol:

Sebenarnya ingin mengupdate lagi, tapi.. apa daya? apa yaa? seperti dijelaskan pada judulnya, “Tunggu aksi saya!™”.


Filed under: Uncategorized   |  1 Comment

Buat Aplikasi MP3 Player Sederhana dengan Flash+AS2

15Apr10

Memanfaatkan kemampuan Flash yang dapat memainkan file MP3 dengan cara membuat Sound object (di AS2, favoritku ;p), saya pernah iseng2 membuat versi cupu dari aplikasi MP3 player.. BTW, tau Winamp kan? nah aplikasi semacam ini yang saya istilahkan sebagai MP3 player (versi kerennya sih :D ), yah.. meskipun yang pernah saya buat tersebut hasilnya masih berupa fitur-fitur dasar sederhana: load file-file MP3, next track, previous track, tampilan informasi MP3nya, dan tampilan playlist (supaya user bisa memilih file MP3 yang ingin dimainkan dengan mengkliknya di playlist).

Cara buatnya, Flash dibuat memanjang ke bawah (biar rada mirip Winamp), simpan 3 buah movieclip yang sama (dimana di dalamnya terdapat sebuah dynamic text dengan instance name “teks“) namun diberikan instance name berbeda yaitu “browse_btn“, “kanan_btn“, dan “kiri_btn” (ketiganya akan berperan sebagai tombol untuk load files, play next track, dan play previous track). Sebuah dynamic text dengan instance name “tulisan_txt” (yang akan menampilkan nama artist, judul, dan ukuran waktu MP3 berjalan dimana informasi ini diambil dari ID3 tags MP3nya). Di bawahnya lagi sebagai tampilan playlist digunakan sebuah List Component dengan instance name “cmp_playlist“. Menyusul kemudian, baris ActionScriptnya disimpan di frame:

import flash.net.FileReferenceList;

var playlist:Array = new Array(0);
var musik:Sound = new Sound();
var angka:Number = new Number(0);
var fileRefList:FileReferenceList = new FileReferenceList();
var listenerFileRefList:Object = new Object();
var listHandler:Object = new Object();

fscommand("showmenu", false);
kanan_btn.onPress = kanan;
kiri_btn.onPress = kiri;
browse_btn.onPress = browseFile;
browse_btn.teks.text = "load";
kiri_btn.teks.text = "prev";
kanan_btn.teks.text = "next";
fileRefList.addListener(listenerFileRefList);
cmp_playlist.addEventListener("change", listHandler);
cmp_playlist.setStyle("fontFamily", "corbel");
cmp_playlist.setStyle("fontSize", "12");
tulisan_txt.text = "load file MP3 terlebih dulu..\n (maaf, di versi cupu ini, file MP3nya mesti sefolder sama aplikasinya)";

listHandler.change = function(evt:Object){
    if(angka != evt.target.selectedItem.data){
		angka = evt.target.selectedItem.data;
		loadMusik();
	}
}

musik.onSoundComplete = function(){
	kanan();
}

musik.onLoad = function(success:Boolean){
	if (success){
		musik.start();
	}
	else{
		tulisan_txt = "salah load file";
	}
}

listenerFileRefList.onSelect = function(file:FileReferenceList){
	for(var i = 0; i < file.fileList.length; i++){
		var filePilihan = file.fileList[i].name;
		if(filePilihan.substr(-3, 3) == "mp3"){
			cmp_playlist.addItem({label:filePilihan, data:playlist.length});
			playlist.push(filePilihan);
		}
	}
	loadMusik();
}

function browseFile(){
	fileRefList.browse([{description:"Ingat: file MP3 sefolder saja! (maklum versi cupu)", extension:"*.mp3"}]);
}

function loadMusik(){
	musik.loadSound(playlist[angka], true);
}

function kanan(){
	if(playlist.length < 1){
		tulisan_txt.text = "load filenya dulu woi..\n(tombolnya di bawah playlist)";
	}
	else{
		angka += 1;
		if(angka >= playlist.length){
			angka = 0;
		}
		loadMusik();
	}
}

function kiri(){
	if(playlist.length < 1){
		tulisan_txt.text = "load filenya dulu woi..\n(tombolnya di bawah playlist)";
	}
	else{
		angka -= 1;
		if(angka <= 0)	{
			angka = playlist.length - 1;
		}
		loadMusik();
	}
}

this.onEnterFrame=function(){
	var posisi:String = musik.position.toString();
	var durasi:String = musik.duration.toString();
	var artist:String = musik.id3.artist.toString();
	var judul:String = musik.id3.songname.toString();
	var menitPlaying:String = Math.floor(posisi/60000) + ":" + Math.round((posisi/1000)%60);
	var menitTotal:String = Math.floor(durasi/60000) + ":" + Math.round((durasi/1000)%60);

	if(playlist.length >= 1){
		tulisan_txt.text = artist + " - " + judul + "\n" + menitPlaying + " / " + menitTotal;
	}
}

Preview

Mohon maaf kalau kodenya terlihat tidak efisien, nampak buggy, dan sulit dibaca algoritmanya acak-acakan :D yang penting fungsional dulu lah ya.. 8) Tekan Ctrl+Enter untuk melihat preview movie.

Namun ada keterbatasan yang cukup mengganggu dari aplikasi yang saya buat ini, yaitu:

Cuman bisa menjalankan file MP3 yang sefolder dengan SWF-nya, klo gak: undefined -__-’

Zzzzz.. Mungkin saya salah cara ngakses file dari objek FileReferenceList? atau sistem sandbox objek Sound yang tidak memperbolehkan loadSound diluar direktori?.. Anybody knows how can I play MP3 files that’s stored anywhere, so it could be like a real MP3 player? please share… Any improvement welcome..

Bagi yang berminat untuk melihat contoh aplikasinya (.exe) sila unduh di http://www.box.net/shared/30010rjlmf

***

Referensi terkait:

  • http://flash-reference.icod.de/flash/net/FileReferenceList.html
  • http://flash-reference.icod.de/Sound.html
  • Tips Trik Flash, Tabloid PC-Mild Edisi 6/2010

    • Filed under: ActionScript 2.0, Aplikasi, Flash, Software, Tutorial   |  25 Komentar
    Tag:, , , , ,

    Setting Proxy Pada Linux Console

    02Apr10

    Nyobain yum atau command lainnya yang ngambil data dari internet tetapi selalu gagal karena terhalang proxy? bahkan meskipun di web browsernya sudah disetting dengan akun yang terautentikasi pula? nah itulah yang saya alami… (karena akses internet di kampus mesti make akun AI3 untuk bisa lewat si cumi)… solusinya? Secara umum, dari apa yang saya baca di salah satu thread forum yang membahas ini, akses dari console (command line di linux) memang tidak secara otomatis ikut tersetting. Untuk itu kita perlu menset akses proxy dengan menambahkan environment variable http_proxy pada shell, caranya adalah dengan mengetikkan command pada linux console:

    export http_proxy="http://namausernya:passwordnya@alamatproxyservernya:nomerportnya/"
# Contoh:
export http_proxy="http://faisalman:password@cache1.itb.ac.id:8080/"
export ftp_proxy="http://faisalman:password@cache1.itb.ac.id:8080/"
export no_proxy="localhost, 127.0.0.1, .itb.ac.id, 167.205.0.0/16"

    Sebaliknya, jika sudah kembali menggunakan akses internet yang direct connection (tidak menggunakan proxy), set ulang dengan command pada linux console:

    export http_proxy=""
export ftp_proxy=""
export no_proxy=""

    Untuk memeriksa settingan proxy mana yang sedang digunakan kita dapat melihatnya dengan mengetikkan command pada linux console:

    echo $http_proxy
echo $ftp_proxy
echo $no_proxy

    Alternatif lain, kita dapat mendefinisikan sendiri sebuah fungsi untuk mensetting akun proxy dengan menggunakan shell script sehingga nantinya tinggal mengetikkan nama fungsi pada shell dan mengisi variabel-variabel yang dibutuhkan. Caranya yaitu dengan buat sebuah file shell script di dalam folder /etc/profile.d berekstensi .sh jika menggunakan bash (yang paling umum digunakan di linux) atau .csh untuk c-shell, kita bisa mengecek jenis shell apa yang digunakan ketikkan perintah pada consolenya:

    echo $SHELL

    Misalkan file shell script yang akan dibuat namanya settinganproxy.sh, maka ketikkan perintah pada linux console:

    sudo nano /etc/profile.d/settinganproxy.sh

    Berikan baris script berikut pada file shell script tersebut dalam nano[1] text editor:

    # Setting akses proxy
function setaksesproxy()
{
  echo -n "proxy: "
  read -e alamatproxy
  echo -n "port: "
  read -e nomerport
  echo -n "username: "
  read -e namauser
  echo -n "password: "
  read -es proxypass
  echo -n "domain tanpa proxy: "
  read -e exclude
  echo ""
  export http_proxy="http://$namauser:$proxypass@$alamatproxy:$nomerport/"
  export ftp_proxy="http://$namauser:$proxypass@$alamatproxy:$nomerport/"
  export no_proxy="localhost, 127.0.0.1, $exclude"
}

# Clear proxy
function setnoproxy()
{
  export http_proxy=""
  export ftp_proxy=""
  export no_proxy=""
}

    Sehingga di shell consolenya linux kita tinggal mengetikkan nama fungsinya saja dan mengisi input-inputnya sajah :D

    Konfigurasi di atas menggunakan asumsi bahwa jaringan ber-proxy tidak digunakan setiap saat, atau menggunakan jaringan ber-proxy yang berbeda-beda, atau akun yang digunakan berbeda-beda. Sedangkan jika setting proxy dibutuhkan setiap saat, mungkin perlu juga untuk menyimpan akun dan password proxy pada user tertentu yaitu dengan mengedit file .bash_profile (file gak kelihatan karena hidden) yang terletak di home directory dari user yang diinginkan untuk diberikan autentikasi proxynya, tinggal ketikkan perintah pada linux console:

    nano /home/namauseryangdiinginkan/.bash_profile

    Berikan baris perintah berikut pada file tersebut:

    export http_proxy="http://namausernya:passwordnya@alamatproxynya:nomerportnya/"
export ftp_proxy="http://namausernya:passwordnya@alamatproxynya:nomerportnya/"
export no_proxy="domain-atau-IP-address-tanpa-proxy-misalnya-127.0.0.1"

    Footnote:
    [1] Nano merupakan program editor pada console linux yang biasanya sudah terinstall secara default, jika tidak ada silakan menggunakan editor favorit lain semisal vim, emacs, dll


    Filed under: Fedora, Internet, ITB, Jaringan Komputer, Linux, Shell Scripting, Tips 'n trik   |  Leave a Comment
    Tag:, , , , , , ,

    Akses Serial Port di Linux

    28Mar10

    Tau program HyperTerminal kan? kalau komputernya Windows XP bisa dilihat di Start Menu > Accessories > Communications > HyperTerminal (dengan asumsi waktu nginstall windows paket instalasi standarnya diinstall semua).

    Ini nih HyperTerminal tuh.. (gambar ngambil dari gugel)

    Kalaulah dulu saya tidak mengambil mata kuliah yang ada praktikum pake HyperTerminalnya (lupa praktikum apaan :p) mungkin saya yang gaptek ini tidak akan tahu apa gunanya program misterius bernama HyperTerminal di Windows itu, dan dengar-denger katanya tidak dimasukkan lagi sejak munculnya Windows Vista dan Windows 7 hehe.. Padahal banyak juga loh device yang salah satu akses konfigurasinya lewat port serial RS-232. Continue reading ‘Akses Serial Port di Linux’


    Filed under: Aplikasi, Elektro, Fedora, Komputer, Linux, Software   |  6 Komentar
    Tag:, , , , ,

    Beberapa Masalah Install di Fedora dan Solusinya

    20Mar10

    Beberapa hari yang lalu saya coba menginstall Fedora (distro linux yang merupakan kelanjutan Redhat versi komunitas dan termasuk salah satu distro yang populer)  lewat flashdisk dengan cara membuat Live USBnya dari file ISO pake UNetbootin[1] (ISO imagenya bisa didapat di http://fedoraproject.org/en/get-fedora-all). ISO yang saya gunakan Fedora-12-x86_64-Live-KDE.iso, kenapa Fedora 12? karena itu versi stable release yang terbaru saat ini (Maret 2010) dengan Fedora 13 yang masih versi beta, x86_64 karena laptop saya yang prosesornya Core2Duo sudah mendukung 64-bit, K desktop environment karena saya suka tampilannya KDE :D ..

    Lewat installer dengan GUI yang intuitif akhirnya ia berhasil saya install ke laptop dengan cepat dan menyenangkan. Namun.. jreng3x.. setelah selesai menginstall Fedora di laptop, saya menemui beberapa problem.. wah kumaha yeuh? but it’s ok, tinggal lihat panduan dokumentasinya[2] saja kan? atau kalaupun tidak berhasil biasanya solusinya bertebaran di banyak situs[3] dan forum[4], tinggal googling sajah[5]. Kecuali beberapa masalah yang spesifik distro, biasanya untuk distro linux apapun solusi masalahnya hampir sama. Hanya saja, untuk tipe komputer berbeda ada kemungkinan masalah yang timbul berbeda pula karena perbedaan konfigurasi hardware, jadi kadang perlu tau juga hardware yang bermasalah tipenya apa, biar gampang googlingnya.

    Berikut list problem setelah saya nginstall Fedora di laptop Axioo saya:

    1. Resolusi Layar
    Setelah diinstall, resolusi layar di laptop tidak secara otomatis diset ke mode WXGA (1280×800), di System Settings > Display hanya ada 2 pilihan resolusi yaitu 640×480 dan 800×600.. wadduh.
    Saya bingung dan cari-cari di google ternyata solusinya mudah, Continue reading ‘Beberapa Masalah Install di Fedora dan Solusinya’


    Filed under: Fedora, Linux, OS, Tips 'n trik, Tutorial   |  11 Komentar
    Tag:, , , , , , , , , ,

    Facebook Chat via Pidgin

    04Mar10

    Teman sebelah (kalau ada) sedang buka Facebook juga kan? ya ya ya, tidak heran, berdasarkan catatan Alexa [1], Facebook merupakan situs web yang paling populer di Indonesia. Dari sekian banyak fasilitas yang ada, salah satu fitur yang digemari di Facebook adalah kemampuan chat di dalam tampilan webnya langsung, meskipun kadang cukup mengganggu. Nah, bagaimana caranya mengaktifkan Facebook Chat di luar situs webnya?

    Mungkin ada 1001 cara supaya bisa menggunakan fitur Facebook Chat di luar situs Facebook lewat aplikasi-aplikasi pihak ketiga apapun itu.  Pada kesempatan ini saya mencoba salah satu IM yang banyak digunakan selain YM (Yahoo! Messenger), yaitu Pidgin (yang dulu namanya GAIM).

    Ada banyak cara juga supaya bisa masang Facebook Chat di Pidgin, antara lain:

    Cara 1:
    Pasang plugin Pidgin-Facebook Chat[2]
    Download dan Install sahaja pluginnya di http://code.google.com/p/pidgin-facebookchat/downloads/list

    Cara 2:
    Menggunakan protokol XMPP (Jabber) [3]
    - Buka program Pidgin
    - Klik menu “Accounts”
    - Pilih menu “Manage Accounts”
    - Klik tombol “Add”
    - Settingan di bagian tab “Basic”:

    * Protocol: XMPP
    * Username: <masukin username Facebook>
    * Domain: chat.facebook.com
    * Resource: Pidgin
    * Password: <masukin password Facebook>
    * Local alias: <masukin nama Facebook>

    - Settingan di bagian tab “Advanced”:

    * Connect port: 5222
    * Connect server: chat.facebook.com
    * Hilangkan ceklis di pilihan “Require SSL/TLS”

    Untuk melihat settingan jelasnya, login dulu ke Facebook, buka http://www.facebook.com/sitetour/chat.php kemudian pilih Instant Messengernya, apakah Pidgin, Adium, iChat, dll.

    Belum punya Pidgin? unduh sahaja installernya di http://www.pidgin.im/

    ***

    Referensi:
    [1] http://www.alexa.com/topsites/countries/ID
    [2] http://code.google.com/p/pidgin-facebookchat/
    [3] http://www.facebook.com/sitetour/chat.php


    Filed under: Facebook, Software, Tips 'n trik   |  3 Komentar
    Tag:, , ,

    1001 Tips & Trik Blog WordPress

    03Mar10

    Sebagai pengguna WordPress, mungkin pernah suatu ketika kita melihat blog WordPress lain memiliki fitur tertentu yang keren atau justru fitur-fitur dasar hanya kita tidak tahu caranya. Misalkan “gimana cara nyisipin video YouTube di antara posting?” “gimana caranya posting lewat HP? kalau via e-mail gimana?” atau pertanyaan “apa aja sih kode smiley (emoticon) default di WP?” dan semacamnya.

    Sebelum masuk ke bahasan selanjutnya, istilah ‘WordPress’ disini perlu diperjelas terlebih dahulu maknanya apakah WordPress sebagai sebuah blog hosting (seperti Blogger, Multiply) atau WordPress sebagai sebuah aplikasi web CMS (seperti Joomla, Drupal). Untuk itu kita perlu membedakan “blog wordpress” yang akan kita oprek termasuk yang mana:

    1. Blog pada WordPress.com

    2. Blog selain di WordPress.com yang menggunakan WordPress sebagai CMS-nya

    Mengapa perlu dibedakan? karena tips dan trik untuk blog-blog tipe pertama memiliki batasan-batasan yang tidak terdapat pada tipe kedua.

    Back to topic.

    Sedikit perkenalan, WordPress merupakan suatu aplikasi web CMS berbasiskan PHP-MySQL yang dibuat oleh Matt Mullenweg dan kawan-kawan yang tergabung dalam Automattic. Sementara itu sebuah kaidah logis mengatakan bahwasanya yang paling tahu baik seluk beluk suatu ciptaan adalah penciptanya. Maka petunjuk yang resmi dan bisa dijamin kebenarannya tentu adalah petunjuk yang dikeluarkan oleh pencipta dari ciptaan tersebut, dalam hal ini petunjuk berupa official support website. Dari itu kita dapat merujuk ke http://en.support.wordpress.com/ untuk blog-blog yang termasuk tipe pertama pada pembagian di atas,  sedangkan untuk blog-blog yang termasuk tipe kedua dapat melihat petunjuk resminya di http://codex.wordpress.org/Main_Page.

    Selamat mengeksplore 1001++ fitur menarik dari sang pemenang The Overall Best Open Source CMS Award 2009 ini. ;)

    Wassalam,

    F4154LMAN


    Filed under: Blog, Tips 'n trik, WordPress   |  8 Komentar
    Tag:, ,

    Nginstall openSUSE Linux via Live USB Flashdisk

    26Feb10

    Lama tak bersua dengan keluarga ‘pinguin’, kali ini asistenku sedang bersama salah satu dari mereka, ‘si bunglon’. Anehnya, asistenku yang 2 tahun lalu biasanya rewel (kecuali saat hinggap di ‘jendela’ dan distro kaos cd bawaannya), namun kali ini ia nampak oke-oke saja. Padahal tahapan yang ia lewati relatif sama, hanya beda medium installnya saja dulu live CD sekarang live USB.

    “Wah, keluarga pinguin makin keren aza”, pikirku.

    Kronologis prosesi mengganti bangkai bingkai ‘jendela’ hingga ke jenjang adopsi ‘si bunglon’:

    1. Download ISO Live CD-nya
    unduh dimari: http://software.opensuse.org/ (saat tulisan ini ditulis, yang terbaru adalah versi 11.2)

    2. Tuliskan ISO image ke medium (dalam hal ini USB Flashdisk)
    jika dari windows, gunakan software ‘Image Writer for Windows’ https://launchpad.net/win32-image-writer untuk mengkopi image ISO sebelumnya tersebut ke dalam flashdisk. Panduan lengkap untuk buat Live USB stick bisa dilihat lebih lanjut di http://en.opensuse.org/Live_USB_stick

    3. Setting BIOS untuk boot via USB
    biar bisa booting dari flashdisk.. setiap motherboard menunya beda, tapi pokoknya cari saja menu yang mengatur boot priority di BIOS.

    4. Jalankan live USB
    Cihuy, sukses.. kedetek semua hardwarenya, kali ini tanpa perlu parameter apa-apa :D

    5. Pilih menu “Install”
    Tampak mengkilap! bungkus.. install langsung! dan inilah hasilnya:

    KDE 4, lebih stylist & fresh.. sayang asistenku kartu grafisnya tidak disupport 3d acc di luar jendela, hingga belum bisa merasakan dahsyatnya Compiz

    Selanjutnya, yang terjadi terjadilah.. one-click-install-nya YaST di openSUSE yang out-of-the-box dengan repositorynya yang lengkap: http://en.opensuse.org/Package_repositories tinggal dipilih.. “dipilih.. dipilih.. sayang anak.. sayang anak..”, begitu barangkali kata-katanya kalau ada tukang dagang.

    “Sejak Continue reading ‘Nginstall openSUSE Linux via Live USB Flashdisk’


    Filed under: Cerita, Linux, Notebook, OS   |  3 Komentar
    Tag:,

    12-Pas-12-Pas-an

    24Feb10

    Ngomong-ngomong soal game, kita yang kebanyakan berperan sebagai konsumen ini sekali-sekali mungkin perlu berpikir untuk menjadi produsen. Melihat game saat ini sudah menjadi industri yang cukup menjanjikan dengan potensi milyaran dolar [1]. Tertarik membuat game sendiri? mulai dari yang sederhana dulu, yuk mari.. 8)

    Pada kesempatan ini game yang akan dibuat adalah latihan eksekusi penalti dari titik putih atau terkadang diistilahkan tendangan “12 pas” yang juga menjadi judul dari game ini. Sebelumnya unduh terlebih dulu gamenya di http://www.box.net/shared/qqdiij7gn1 untuk mencicipi (cukup 1.4 MB saja). Gamenya cupu abizz memang  dibandingkan buatannya game developer, tapi untuk mencapai langkah ke-1000 selalu diawali dengan langkah pertama, kan? ;)

    Sekarang masuk ke pertanyaan, bagaimana cara membuat permainannya? Continue reading ‘12-Pas-12-Pas-an’


    Filed under: ActionScript 2.0, Flash, Game, Iseng, Tutorial   |  25 Komentar
    Tag:, ,

    Mispersepsi Lingkup Kerja Engineer

    18Feb10

    Sebuah quote dari salah satu group di Facebook, couldnt agree more than this lah pokonamah!

    I have officially reached a point where if someone would now ask me if Electronic/Electrical Engineers fix TVs and VCRs I am going to punch them so hard that they forget what a TV is in the first place. My full respect to all technicians and repairmen, but that is not what engineers do.

    There is so much misunderstanding about what an Electronic/Electrical Engineer or any kind of Engineer for that matter does, whether Electrical, Computer, Civil, Mechanical, Nucleur… It’s not only a problem within the engineering fields but with any university discipline. Many people are ignorant and do not understand what a particular discipline involves. Engineering though is probably the most affected by this ignorance as the things we deal with are too intellectually difficult for most people to even start to comprehend.

    Speaking as an Electronic Engineer, even if I tried explaining what I do to someone they just do not understand and end up with the conclusion that we fix TVs (that’s if they didn’t think that in the first place). So what do we do? you probably wouldn’t understand if we told you and if you do understand then you should already know.

    http://www.facebook.com/group.php?gid=7155434306

    wkwkwk :D


    Filed under: Elektro, Humor, Iseng, Istilah, Kata-kata, Kuliah, Unek-unek   |  1 Comment

    Metoda Optimasi Jaringan WAN

    17Feb10

    Definisi
    Wide Area Network (WAN) adalah jaringan komputer dalam area yang luas (contohnya jaringan yang saling berkomunikasi antar wilayah metropolitan, regional, atau perbatasan negara). Atau secara mudahnya, yaitu sebuah jaringan yang menggunakan router dan sambungan komunikasi publik.

    WAN optimization adalah upaya untuk mempercepat aplikasi dalam skala luas yang diakses oleh user-user yg terdistribusi, dengan mengeliminasi transmisi yang tidak diperlukan, mengelompokkan data pada level tertentu dalam local cache, melakukan compression, melakukan pemrioritasan pada data, dan mengefisienkan protocol.

    WAN Optimizer tersebar pada kedua sisi koneksi WAN. Pada kebanyakan kasus, berada di belakang router WAN pada sisi LAN. Device tersebut mensetting application traffic yang ditujukan untuk WAN sehingga performa aplikasi yang melewati WAN dipercepat. Hasilnya adalah akselerasi WAN dan respon waktu aplikasi yang lebih cepat.

    ***

    Alasan Utama Pentingnya Optimasi
    Performa sebuah jaringan bagi network administrator merupakan hal yang sangat penting. Karena itu ketika performa jaringan mulai melambat atau bahkan seringkali gagal, tentu seharusnya segera ditindaklanjuti.

    Dalam hal ini setidaknya seorang network administrator memiliki 2 solusi menyelesaikannya yaitu:
    1. melakukan upgrade jaringan WAN, atau
    2. melakukan optimasi jaringan WAN.

    Untuk melihat solusi mana yang terbaik, tentu kita perlu membandingkannya dari beberapa sisi. Dari sisi biaya, pilihan pertama memerlukan ongkos yang lebih mahal karena perlu menambah kapasitas link dan mengganti perangkat yang kapasitasnya rendah. Sedangkan untuk pilihan kedua. Dari sisi penyelesaian masalah, pilihan pertama dalam jangka pendek merupakan solusi yang baik, namun untuk jangka panjang pilihan ini seringkali tidak menyelesaikan masalah, bahkan masalah yang sama dimungkin dapat terjadi kembali.

    Sehingga dapat kita simpulkan bahwa meski pilihan pertama merupakan pilihan yang logis, namun pilihan kedua ternyata lebih efektif dari sisi cost, solusi untuk jangka panjang, dan lebih elegan.

    ***

    Mekanisme dan Prinsip Kerja Optimasi Jaringan

    1) Compression
    Prinsip dasar compression pada produk WAN yaitu untuk merepresentasikan sebuah frame dari data menjadi lebih singkat dengan metoda algoritma compression tertentu untuk nantinya ditransmisikan melalui jaringan, hanya saja kompresi data ini terjadi hanya pada jalur WAN dan kemudian akan didekompress secara otomatis setelah terkirim, ini tentu akan menghemat space lebih pada jalur WAN untuk paket lain sehingga dapat membuat jaringan tersebut semakin efisien. Optimasi dengan metoda compression ini sangat cocok untuk jaringan dengan topologi point to point leased lines.

    2) Caching
    Mekanisme caching sangat diperlukan jika ada pengaksesan data atau site yang sama dari waktu ke waktu sehingga mengurangi pengiriman paket yang sama yang berulang ulang, karena caching server memiliki kemampuan untuk menyimpan informasi yang sering diminta.

    Salah satu kekurangan caching adalah adanya resiko memberikan data yang tak update. Jika kita mengakses halaman cache saat ini, maka beresiko mendapatkan informasi yang salah dan sudah basi. Kebanyakan browser sebenarnya dapat melakukan mekanisme caching masing-masing. Banyak web server yang menyimpan time stamp dari update terakhir mereka, kemudian browser menggunakan salinan cache dari remote page setelah memeriksa time stamp tersebut.

    3) Traffic Shaping
    Application shaping, atau traffic shaping, atau bandwidth control adalah metoda yang mengoptimize bandwidth. Metode ini dapat membagi-bagi jalur WAN untuk bermacam aplikasi dimana jaringan dapat dikontrol dan pada akhirnya trafik yang penting mendapat bandwidth yang cukup.

    4) Equalizing
    Equalizing membuat penyesuaian dengan menambahkan latency pada data yang mempunyai prioritas rendah, sehingga data dengan prioritas yang lebih tinggi menerima bandwidth yang cukup. Aliran pada bandwidth dengan prioritas tinggi biasanya sedikit dan dapat diketahui oleh administrator. Aliran tersebut jarang muncul secara spontan, jadi sedikit lebih mudah untuk memberi pengecualian pada aliran aliran yang jarang seperti ini. Hal ini tentunya lebih mudah daripada mengklasifikasi setiap aliran pada jaringan setiap waktu.

    5) Connection Limits
    Prinsip kerjanya yaitu mencegah akses yang terhambat pada router dan akses point karena denial of service atau peer to peer. Cocok untuk wide open Internet access links, dapat juga digunakan untuk jalur WAN.

    6) Simple Rate Limits
    Simple rate limit adalah bentuk penggunaan bandwidth control yang paling umum dan luas digunakan. Simple rate limit membatasi kecepatan akses secara simpel, misalnya sebuah Internet Service Provider menjanjikan kepada para penggunanya “256 kbps up dan 256 kbps down”. Mencegah satu user mendapatkan lebih banyak dari sejumlah data.

    7) Proxy
    Proxy Server, yang bisa berupa komputer atau perangkat keras yang menjalankan proxy service, bekerja sebagai penengah antara user yang berada di jaringan internal, dan service yang berada di jaringan luar (biasanya Internet). Proxy server mengambil request dari user dan melakukannya untuk kepentingan user. Di sistem eksternal, request tersebut seolah olah datang dari proxy server, bukan dari user yang berada di jaringan internal.

    ***

    ~Secuil ringkasan dari tulisan lama hasil studi literatur saat kerja praktek Juni-Agustus 2008 yang saya simpan di bagian bab 3 dari makalahnya yang berjudul “OPTIMASI JARINGAN WAN MENGGUNAKAN PACKETEER PACKETSHAPER”,  hanya baru diblogkan sekarang :p~

    Daftar Pustaka:
    [1] http://en.wikipedia.org/wiki/Wide_Area_Network
    [2] http://en.wikipedia.org/wiki/WAN_optimization
    [3] http://www.netequalizer.com/bandwidthwhitepaper.php
    [4] dll (Dan Lupa Lagidarimanaajapokonamahmendaktigoogleweh)

    ***

    Posting terkait:
    http://faisalman.wordpress.com/2008/06/15/kape-deh/
    http://faisalman.wordpress.com/2008/07/15/foto2-eksklusif-sang-asisten/


    Filed under: Elektro, Jaringan Komputer, Rada Serius   |  Leave a Comment
    Tag:, , , , , , , , , , ,

    Algoritma Quine-McCluskey

    16Feb10

    Quine-McCluskey merupakan salah satu metoda yang digunakan untuk menyederhanakan sebuah persamaan boolean. Fungsinya sama seperti Karnaugh Map (K-Map), hanya saja dengan metode Quine-McCluskey kita dapat menghitung lebih dari 6 variabel. Format tabelnya juga menjadikan lebih efisien untuk digunakan dalam algoritma komputer dan memberikan cara deterministik untuk memeriksa bahwa bentuk minimal sebuah fungsi boolean telah tercapai.

    Metode ini secara umum terdiri dari 2 langkah, yaitu mencari semua prime implicant kemudian pilih EPI & sisa PI yang mengcover minterm sehingga didapat fungsi minimum.

    Contoh soal:
    Sederhanakan fungsi F(A,B,C) = Σm(0,1,2,3,6,7,8,9,14,15)

    Jawab:
    Langkah 1
    Buat tabel semua minterm dari fungsi berdasarkan representasi binernya

    Langkah 2
    Susun minterm menjadi beberapa grup berdasarkan jumlah 1 dari representasi binernya

    Langkah 3
    Bandingkan setiap minterm dalam sebuah grup dengan setiap minterm grup di bawahnya. Jika keduanya hanya memiliki satu nilai bit yang berbeda, kombinasikan menjadi sebuah term baru pada list berikutnya dengan tanda (-) pada variabel yang dieliminasi.

    Langkah 4
    Ulangi langkah diatas untuk semua grup dari minterm dalam list, hasil dalam list baru disusun per grup juga. Pemberian tanda ceklis (v) dilakukan setelah membuat list berikutnya, dengan menceklis minterm yang ada kombinasinya di list selanjutnya.

    Langkah 5
    Bandingkan lagi grup minterm pada list baru, cari yang berbeda satu bit seperti langkah sebelumnya kemudian susun lagi hasilnya menjadi sebuah list baru. Lakukan terus langkah ini hingga tidak ada list baru yang dapat dibuat. Semua term yang tidak terceklis merupakan Prime Implicant.

    Langkah 6
    Pilih subset prime implicant paling minimal, yang dapat mengcover semua minterm dari fungsi booleannya.

    Dari perhitungan di atas kita kita lihat bahwa PI2 dan PI4 merupakan EPI (Essential Prime Implicant) karena mengcover 8,9 dan 14,15 yang tidak memiliki PI lain yang mengcovernya. Dengan mengambil keduanya otomatis 0,1,6,7 telah tercover. Sisanya untuk mengcover 2,3 ambil dari PI1 atau PI3, sehingga kita dapatkan solusi dari soal ini:

    F  =  PI1 + PI2 + PI4
    =  A’B’+ B’C’ + BC

    Sumber: berkas-berkas catatan kuliah “Perancangan Rangkaian Sekuensial”. Ditemukan juga pada catatan kuliah “Rangkaian Logika & Teknik Digital” dan matakuliah “Matematika Diskrit”.


    Filed under: Elektro, Kuliah   |  2 Komentar
    Tag:, , , ,

    Load External JPGs dengan Method loadMovie()

    22Des09

    Menampilkan file gambar di Flash dapat dilakukan dengan beberapa cara, salah satu diantaranya dengan me-load file-file berupa JPG dari luar SWF menggunakan method loadMovie(a,b) [dengan: a = URL source, b = destination Movieclip]. Cara ini memiliki kelebihan manakala file gambar banyak dan ukuran filenya besar, karena file gambar akan diload sesuai jumlah permintaan sehingga tidak terlalu membebani resources komputer dibandingkan dengan mengimport semua file gambar dalam satu file flash.

    Format file gambar yang dapat diload secara dinamis pada flash diantaranya JPG, PNG, dan GIF.  Ketiga format tersebut memiliki kelebihannya masing-masing, mana yang akan kita gunakan disesuaikan dengan kebutuhan.

    Sebagai contoh disini saya membuatkan tutorial untuk membuat sebuah galeri sederhana dengan langkah-langkah pembuatannya sebagai berikut:

    - Siapkan 4 buah file gambar dengan ukuran 400×250 pixel. Karena pada contoh ini yang digunakan adalah gambar daun dengan format file JPG, maka kita berikan nama “daun1.jpg”, “daun2.jpg”, “daun3.jpg”, “daun4.jpg”.

    4 File JPG yg akan diload

    - Buat sebuah file Flash baru dengan Continue reading ‘Load External JPGs dengan Method loadMovie()’


    Filed under: ActionScript 2.0, Flash, Tips 'n trik, Tutorial   |  7 Komentar
    Tag:, , ,

    Hello World! (again)

    30Nov09

    Welcome to WordPress.com. This is your first 96th post. Edit or delete it and start blogging! (again)

    ~The 3rd Anniversary


    Filed under: Blog, Gak Penting, Iseng, WordPress   |  2 Komentar

    Typewriter Effect dengan ActionScript 2.0

    19Okt09

    Membuat efek animasi teks yang muncul huruf per huruf (seperti sedang ngetik) sampai menjadi sebuah paragraf dapat kita buat dengan menulis beberapa baris ActionScript. Siapkan terlebih dulu sebuah objek dynamic text dengan settingan multiline, font yg khas, dan nama variable ‘tulisan’. Setelah itu tuliskan script ini di frame utama:

    var i:Number = 1;
var tulisan:String;
var tulisanFull:String = "Pemilik blog dengan tagline \"ikatlah ilmu dengan memblogkannya\" ini mengucapkan terima kasih atas kunjungan anda hari ini, selamat datang kembali di lain hari, dan jika berkenan silakan tinggalkan jejak pada halaman Buku Tamu. Wassalam.\n\n\n-F4154LMAN-";

this.createEmptyMovieClip("mesinTik", this.getNextHighestDepth());

mesinTik.onEnterFrame = function(){
	if (i < tulisanFull.length) {
        tulisan = tulisanFull.substring(0, i);
        i++;
	}
	else {
        tulisan = tulisanFull;
        delete mesinTik.onEnterFrame;
	}
}

    ngetik sendiri

    Kuncinya adalah pada fungsi substring() yang dieksekusi secara berulang sehuruf demi sehuruf hingga sebanyak jumlah huruf pada variable ‘tulisanFull’ (yg bertipe String) dengan kecepatan pengulangan sesuai settingan FPS (karena fungsi dijalankan setiap ‘onEnterFrame’) pada Flash movie yg dibuat.

    Contoh hasil export .SWF dan source .FLA-nya bisa diunduh di Continue reading ‘Typewriter Effect dengan ActionScript 2.0’


    Filed under: ActionScript 2.0, Flash, Tutorial   |  16 Komentar
    Tag:, , ,

    Memanfaatkan Fitur Drawing API Pada Flash

    18Okt09

    Membuat aplikasi tiruan MS Paint (tau kan? software preinstalled di Windows yg dipake buat menggambar, biasa diakses lewat Start Menu > Program > Accessories > Paint) tapi menggunakan Flash, emang bisa yah? wow, dulu pun saya sempat tidak tahu fitur Flash selain yang biasa digunakan untuk membuat CD interaktif, dan baru terbuka matanya setelah melihat demo game menggambar buatan kang Fathah.. wah ternyata Flash itu asyik ya? :D

    Kalau kita eksplorasi lagi Flash+tombolF1 (manual helpnya Flash yg cukup lengkap) pada bagian Class MovieClip disana ada penjelasan bahwa Class MovieClip memiliki beberapa fungsi untuk menggambar (diistilahkan dengan Drawing API) seperti: beginFill(), beginGradientFill(), clear(), curveTo(), endFill(), lineTo(), lineStyle(), moveTo(), yang memungkinkan untuk menghasilkan perpaduan kurva, garis, dan warna pada stage hanya dengan menuliskan beberapa baris script.

    Sebagai latihan ngoprek, kali ini kita akan coba buat aplikasi corat-coret Continue reading ‘Memanfaatkan Fitur Drawing API Pada Flash’


    Filed under: ActionScript 2.0, Flash, Tutorial   |  16 Komentar
    Tag:, , ,

    Antitesis Atas Teori Gujarat Van Snouck Hurgronje

    13Okt09

    Beberapa hari yang lalu, iseng jalan-jalan ke toko buku, di salah satu raknya ada jajaran majalah tematik islami yg harganya 1 dirham membuat penasaran untuk membacanya sekilas (baca di tempat :D ). Yang menarik di edisi ke 9, majalah ini mengangkat tema “The Untold History Part1″, mengungkap berbagai fakta sejarah di Indonesia yang tidak banyak diketahui bahkan seringkali berbeda dengan pelajaran sejarah resmi yang pernah didapatkan di sekolah, highly recommended lah untuk menambah wawasan keislaman dan melek sejarah.

    Peta Hindia Belanda

    Salah satu topik yang diangkat adalah tentang awal masuknya dakwah Islam ke bumi Nusantara (sebelum abad 20 rasanya belum dikenal istilah “Indonesia”—sebagai nama lain Hindia Belanda, yang menyatakan wilayah2 bekas jajahan Belanda- kan? Belandanya aja belum dateng.. :D) berdasarkan penelitian beberapa ahli sejarah, ternyata telah dimulai bahkan sejak zaman Rasulullah diutus atau segenerasi dengan para Sahabat. Padahal buku-buku sejarah kebanyakan menyatakan bahwa Islam dibawa pada abad 14 oleh para pedagang dari Gujarat, yang dikenal sebagai “Teori Gujarat”. Tapi tahukah anda bahwa pencetus Teori Gujarat ini adalah seorang orientalis Belanda yang seluruh hidupnya didedikasikan untuk menghancurkan Islam: Snouck Hurgronje. (tampak ad hominem? tenang.. baca aja dulu sampai akhir artikel.. :D )

    christiaan snouck hurgronje

    Sang penulis buku De Atjehers yang berkhianat terhadap rakyat Aceh untuk penjajah Belanda

    Kalau Teori Gujarat ini benar, menurut akal saja rasanya terlalu lama rentang waktu yg dibutuhkan 700 tahun untuk sampainya dakwah Islam ke Nusantara, padahal telah diketahui bahwa para pedagang dari Nusantara telah lama menjalin hubungan dengan para pedagang Cina dan Arab. Sebuah dokumen kuno asal Tiongkok bahkan menyebutkan bahwa sekitar tahun 625 M—hanya berbeda 15 tahun setelah Rasulullah menerima wahyu pertama (atau 9,5 tahun setelah Rasulullah berdakwah terang-terangan kepada bangsa Arab)—di sebuah pesisir pantai Sumatera sudah ditemukan sebuah perkampungan Arab Muslim. Dari berbagai literatur, diyakini bahwa kampung Islam di daerah pesisir Barat Pulau Sumatera itu bernama Barus atau yang juga disebut Fansur.

    Aceh old map

    Peta Sumatra

    Mari simak artikelnya: (copy-paste dari eramuslim.com) Continue reading ‘Antitesis Atas Teori Gujarat Van Snouck Hurgronje’


    Filed under: Indonesia, Islam, Sejarah, Sejarah Islam   |  9 Komentar
    Tag:, , , , , , , , , , ,

    Menyisipkan Video Eksternal Pada Flash Menggunakan Component FLVPlayback

    12Okt09

    Untuk menjalankan file video dari dalam sebuah Flash movie kita dapat memanfaatkan component (sebuah predefined movieclip package) yang bernama FLVPlayback. Diantara kelebihan menjalankan video menggunakan objek dari component FLVPlayback ini antara lain sudah tersedianya fitur-fitur dasar yang umum ada pada video player (seperti tombol play/pause, tombol stop, tombol mute, volume bar, seek bar), memiliki koleksi tampilan skin yang dapat diubah sesuai keinginan, objek video dapat digeser dengan mudah pada stage saat authoring mode, dan dengan menggunakan component ini kita menjaga file SWF tetap berukuran kecil karena video dijalankan secara dinamis dari file eksternal yang bertipe FLV. Jika format file video yang kita miliki berbeda, kita dapat mengconvertnya menjadi FLV dengan software Flash Video Encoder yang biasanya sudah terinstall bersama dengan Flash.

    Langkah-langkah selanjutnya:

    Continue reading ‘Menyisipkan Video Eksternal Pada Flash Menggunakan Component FLVPlayback’


    Filed under: Flash, Tutorial   |  13 Komentar
    Tag:, , ,
    « Older posts
    Ikuti

    Get every new post delivered to your Inbox.

    Bergabunglah dengan 96 pengikut lainnya.