Archive for the ‘Javascript’ Category

Menampilkan Menu di Halaman web kita seperti Dock menu di OsX Apple kelihatan sangat keren, berikut beberapa Javascript Plugin untuk Menampilkan Dock Menu like OsX.

BubbleUp Jquery

Requirements: jQuery Framework
Demo: http://aext.net/jquery-menu-plugin-bubbleup/
License: License Free

Mac Dock v2

Requirements: All Browsers except IE6
Demo: http://www.aplweb.co.uk/jQuery/Mac_Dock_v2/
License: License Free (more…)

Javascript Maps Plugin

Posted: December 4, 2010 in Maps

Saya pernah menulis tentang dasar-dasar Google Maps, salah satu point penting adalah Google Maps API sendiri menggunakan bahasa javascript. Secara tidak langsung mungkin temen-temen berfikir, adakah plugin dari framework2 sekarang yang dikembangkan untuk membangun aplikasi Google Maps atau yang berhubungan dengan Pemetaan. yaapppss… pasti ada, disini saya akan tampilkan 10 Plugin Javascript untuk mendukung dan menampilkan Pemetaan baik Layer, Vektor , Raster atau menggunakan Google Maps sebagai Tools utama.

  1. SpryMap

    Kebutuhan Sistem : Javascript Enabled
    Demo Program : http://candrews.net/sandbox/spryMap/
    Lisensi : Creative Commons License
  2. bMap

    Kebutuhan Sistem : jQuery Framework
    Demo Program: http://www.blocsoft.com/bmap/
    Lisensi: GPL License
  3. PolyMap


    Kebutuhan Sistem : –
    Demo Program: http://polymaps.org/
    Lisensi: BSD License (more…)

Sebenarnya galeri image dengan javascript merupakan salah satu fungsi library yang perkembangannya pesat. Disini saya akan tampilkan 10 Galeri terbaik yang bisa anda gunakan.

  1. FancyBox

    Requirements: jQuery
    Demo: http://fancy.klade.lv/
    License: MIT License
    (more…)

Interaktif Grafik HTML5 : HumbleFinance

Posted: December 4, 2010 in Grafik

HumbleFinance merupakan HTML5 data visualization tool written as a demonstration of interactive graphing in HTML5. Grafik ini mirip sengan  Google Finance.  Program ini sendiri ditulis dalam bahasa Javascript dengan menggunakan Library Prototype dan Flotr Library.

Anda dapat Memanfaatkan fungsi mouse didalam grafik untuk melihat informasi data dan meng-zoom grafik.  Firefox, chrome dan safari merupakan salah satu browser yang mendukung Library ini.

Kebutuhan Sistem : Prototype 1.6.1+, Flotr 2.0 (modified)
Demo Program : http://www.humblesoftware.com/finance/index
Lisensi : MIT Lisensi

Filament Group pernah menulis tentang artikel bagaimana menggunakan/ membuat grafik javascript dengan tabel dari HTML  Teknik seperti ini secara praktek sangat berguna karena data dan informasi secara langsung sudah terdapat di HTML script anda.

Sekarang Filament Group menuliskan konsep tersebut dan dituangkan dalam plugin jquery dengan nama “Visualize“,  Silahkan anda download dan manfaatkan sesuai kebutuhan anda.

Kebutuhan Sistem : IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 and 4, Opera 9
Demo Program : http://www.filamentgroup.com/examples/charting_v2/index_2.php
Lisensi : MIT, GPL Lisensi

JS Charts merupakan grafik berbasis javascript yang gratis dan powerfull. untuk menggunakan aplikasi ini juga tidak dibutuhkan banyak coding bahkan saya rasa anda   tidak membutuhkan tambahan coding, cukup menambahkan informasi data grafik yang ingin anda tampilkan saja.  Dnegan hanya memasukkan library script dan menampahkan file xml “bisa juga dengan generate php ke xml” untuk menampilkan grafik yang anda inginkan.

Berbagai macam design dan model grafik disediakan, Gratis dalam penggunaan dan compatible dengan banyak browser.

Kebutuhan Sistem : Firefox 1.5 +, IE 6, Safari 3.1 +, Opera 9 +
Demo Program : http://www.jscharts.com/examples
Lisensi : Creative Commons 3.0 Lisensi

Grafik 3 Dimensi dengan Javascript

Posted: December 4, 2010 in Grafik

Canvas 3D Graph memiliki fungsi yang mampu menampilkan grafik anda dalam bentuk 3dimensi, sebuah grafik yang saya rasa bagus dan wajib anda coba. program ini masih dalam tahap pengembangan terus, jadi sabar saja untuk update grafik berikutnya yang lebih baik.

Kebutuhan Sistem : –
Demo Program : http://dragan.yourtree.org/code/canvas-3d-graph/
Lisensi : BSD Lisensi

Flotr merupakan penganti dari  Solutoire Plotr dengan bantuan library dari prototype . Flotr memperbolehkan kita untuk mengambar grafik dan diaplikasikan pada halaman website kita . Dengan Tambahan fitur seperti legenda, mouse tracking, zoom sampai dengan CSS style dan banyak lagi.

Kebutuhan Sistem :Prototype 1.6.0.2+, excanvas.js (included in the Flotr zip file)
Demo Program : http://solutoire.com/flotr/docs/
Lisensi : MIT Lisensi

JFreeChart 100% library java chart yang akan memberikan kemudahan bagi developer untuk mengembangkan aplikasi grafik profesional dan memberikan kualitas grafik yang baik. . JFreeChart project pertama kali dikembangkan tahun 2000 oleh David Gilbert dan terus berkembang sampai dengan sekarang.  sekarang ,JFreeChart telah digunakan oleh 50ribu pengembang .

    Kebutuhan Sistem : Java 2 platform (JDK version 1.3 or later)
    Demo Program : http://www.jfree.org/jfreechart/samples.html
    Lisensi : LGPL Lisensi

    wCalendar- Google Clone Calendar

    Posted: December 4, 2010 in Kalender

    wdCalendar merupakan kalender berbasis jquery yang mirip dengan google kalender. Itu meliputi fitur kalender google. Pengguna dapat memilih untuk tampilan harian, mingguan, atau melihat tampilan bulanan. Pengguna dapat dengan mudah membuat, memperbarui atau menghapus kegiatan dengan drag & drop. wdCalendar dapat dengan mudah di integerasikan dengan database.

    wdCalendar dibagikan gratis (open source LGPL license), mudah digunakan, dan dengan fungsi yang banyak . Anda dapat melihat demo , dan download di sini .

    Kebutuhan Sistem : jQuery Framework
    Demo Program : http://www.web-delicious.com/jquery-plugins-demo/wdCalendar/sample.php
    Lisensi : LGPL License

    Dua Design Jam dan Penunjuk waktu yang di design murni dengan javascript dan css. Tanpa perlu menggunakan Flash atau , design ini hanya memerlukan tag

    dan .

    design jam dan penunjuk waktu yang bagus dan terkesan elegant. program ini mampu berjalan di Chrome, Firefox 3.5 dan Safari yang kita ketahui sebagai browser yang support css transform property.

    Kebutuhan Sistem : Browsers support CSS transform property
    Demo Program : http://joncom.be/code/css-clocks/
    Lisensi : License Free

    jDigiClock merupakan Plugin jquery tab yang terinspirasi dari HTC Hero Clock Widget. untuk menggunakan Plugin ini cukup memasukkan Library Jquery dan jDigiClock source file dan core css didalam tag HTML file anda.

    Kebutuhan Sistem : jQuery Framework
    Demo Program : http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/
    Lisensi : MIT and GPL License

     

    Flip-Down Animasi Jam dengan Mootools

    Posted: December 4, 2010 in Kalender

    Nettus kemaren mempublish tutorial tentang : Learn how to Create a Retro Animated Flip-Down Clock. Dalam tutorial ini, kita dapat membuat animasi flip down jam yang terinspirasi seperti jam pada tahun 70an.

    Jam terdiri dari  3 posisi, yaitu jam,menit dan detik. dan mampu memberikan efek flip dengan baik.

    Kebutuhan Sistem : Mootools Framework
    Demo Program : http://nettuts.s3.amazonaws.com/470_clock/Source/index.html
    Lisensi : Lisensi Gratis

    jsDatePick merupakan date picker yang mengunakan teknik DOM untuk mengenerate kode HTML,  silahkan coba contoh yang ada untuk mengetahui kinerja dari library ini.

     

     

    Kebutuhan Sistem : –
    Demo Program : http://javascriptcalendar.org/javascript-date-picker.php
    Lisensi : GPL Lisensi

    Tutorialzine beberapa waktu lalu menunjukkan bagaimana membuat sebuah  Advanced Event Timeline dengan bantuan  dari  PHP, MySQL, CSS & jQuery, program ini akan menampilkan timeline yang baik ditambah dengan dukungan aksi klik event. Untuk menambahkan event pun cukup mudah seperti menambahkan baris/ record  pada database.

    Silahkan coba untuk mengetahui fungsi dan manfaat yang dapat digunakan oleh anda.

    Kebutuhan Sistem : PHP, CSS and jQuery Framework
    Demo Program : http://demo.tutorialzine.com/2010/01/advanced-event-timeline…
    Lisensi : Lisensi Gratis