May 24, 2011

19 Unique jQuery Tutorials for Web Developers

Filed under: Artikel Terbaru, JQuery — Tags: , , , , , — Fobita @ 11:19 pm

jQuery is the premier library for coding JavaScript page effects. Most popular content management packages run jQuery for both admin and frontend design effects. As a web developer jQuery can be a fun library to spend some time learning and offers tremendous design potential.

It seems there are so many references and guides out there it’s easy to get lost. Below we’ve compiled 19 unique jQuery tutorials to help develop your skills as a frontend developer.

Form validation from scratch

jQuery Form Validation

Develop a simple and powerful jQuery script for common HTML form validation.

Incredible jQuery Login Form

jQuery Login Form

Learn how to code a structural jQuery login form with sliding animation. Hide your form out of a visitors view until clicked.

Creating a Digg Style Signup Form

Digg-style signup form

Digg has been an innovator for web apps for years. Learn how to develop a dynamic registration form similar to their signup page.

Color jQuery & CSS3 Sliders

jQuery CSS3 Sliders

Here you are taught about using jQuery and the new transformation features brought by CSS3 to create a dynamic slider effect.

Working with Events – Part 1

jQuery Events part 1

Part 1 of a detailed series teaching about events in jQuery. Here you’ll learn the bare-bones of the jQuery library and how to use events to construct your own functions.

Ajax-based Form Submission

Ajax Submission Form

Here you’ll learn how to submit a web form and display the submission result with some fancy fadeOut or slideUp effects. You’ll utilize both jQuery effects and Ajax for form submission.

jQuery Fade-in Spoiler

Fade-in Spoiler Tags

Practice designing a spoiler system with a fade-in effect using jQuery. This can be helpful in hiding tips or potential plot spoilers in website comments.

Dynamic Page Content Replacement

jQuery Content Replacement

Design a unique content replacement script with a fade effect. You can run small tabs or links on your page to switch betweet content settings.

Simplify Ajax development with jQuery

simple Ajax development

Here you’ll learn about the jQuery syntax, discover its features and functions, perform some common Ajax tasks, and find out how to extend jQuery with plug-ins.

Simple Toggle with CSS & jQuery

simple jQuery toggle

jQuery can be difficult when first learning about open and close states. This tutorial guides you through the basics of mastering the jQuery toggle states.

Create a unique Gallery with z-index

unique jQuery gallery design

jQuery development can be combined with the CSS property z-index to create a unique photo gallery effect.

Design Skype-style buttons with jQuery

Skype-style buttons using jQuery

As a very powerful JS library jQuery can do almost anything these days. Here you’ll create some unique Skype buttons with only some basic jQuery and CSS.

Apple-style Slideshow Gallery

Apple-style Slideshow

Using basic HTML/CSS and jQuery development we’ll create a simple Apple gallery slideshow effect. Beautiful to fit into any webpage.

From PHP & XML into jQuery

PHP/XML into jQuery

Getting back into PHP backend programming here you’ll learn how to connect data retrieved through the backend and place it into jQuery and Ajax effects.

Manipulating the DOM(code snippits)

Manipulating the DOM through jQuery

Working with jQuery to manipulate the Document Object Model is a powerful skill to understand. Here there’s 10 fantastic code snippits in working with jQuery and the DOM.

Semantic Blockquotes with jQuery

Semantic Blockquotes with jQuery

In this tutorial we identify text needed as a quote and using the DOM insert it into any area content. This helps avoid duplicate content and works well with mobile browsers.

jQuery Basics with Google Maps

Google maps Basics

In this tutorial you’re guided through how to get started using jQuery inside the Google Maps environment. You can create amazing mashups and creative designs with a simple connecting to the Google Maps API.

Create a Live Updating List

Live update list with jQuery

Creating a dynamic list in jQuery is a simple effect which goes a long way for user interface. Here you’ll learn the basics of creating a dynamic jQuery powered list.

Flickr CSS Menu Design

Flickr Horizontal Menu Design

Here you’ll learn a simple step-by-step way to implement an Flickr Horizontal Menu Demo in jQuery and CSS.

Sumber : webdesignledger

11 Useful jQuery Tab Navigation Solutions

Filed under: Artikel Terbaru, JQuery — Tags: , , , , , — Fobita @ 11:16 pm

Sometimes using tabs just makes a lot of sense. For instance, if you have a limited amount of screen real estate, tabs can allow you to save room by giving the user a way to toggle between several items in a small space. And to take your tabs a step further, you can throw jQuery into the mix for some nice transition and animation effects. If you’ve yet to build a tab navigation with jQuery, here are 11 tutorials and plugins to help you get going.

Create A Tabbed Interface Using jQuery

jquery tab navigation

A tutorial and plugin for creating an animated tabbed area.

Sweet AJAX Tabs With jQuery 1.4 & CSS3

jquery tab navigation

In this tutorials you’ll learn how to create an AJAX-powered tab page with CSS3 and jQuery.

Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery

jquery tab navigation

This tutorials teaches you how to build a dynamic tabbed blogroll with some fun jQuery animations.

Create a Slick Tabbed Content Area using CSS & jQuery

jquery tab navigation

This tutorials teaches you how to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.

Feature List

jquery tab navigation

This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget.

Fancy Sliding Form with jQuery

jquery tab navigation

This tutorial teaches you how to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.

Create A Tabbed Interface Using jQuery

jquery tab navigation

This tutorial teaches you how to easily create a tabbed interface using the Tabs function in the jQuery UI library.


jquery tab navigation

This Jquery plugin lets you easily create tabbed content. All you need is an ul-element with some li-elements and a couple of related content-divs. The major difference between Tabify and it’s competitors is it’s size.


jquery tab navigation

jQuery Plugin that generates a Tab Navigation from Markup that makes sense without Javascript. The generated Tabs are the only ones out there that work for Screenreader users without support for WAI ARIA.


jquery tab navigation

idTabs is a plugin for jQuery that makes adding tabs into a website super simple. But it can also open the door to endless possiblities.

jQuery Moving Tab and Sliding Content Tutorial

jquery tab navigation

Learn how to build a lava lamp tab and sliding content all together with just simple jQuery code. This script is good for sidebar that display recent posts, comments and community news.

Sumber :

13 Excellent jQuery Animation Techniques

Filed under: Artikel Terbaru, JQuery — Tags: , , , , , — Fobita @ 11:01 pm

Beberapa tahun yang lalu, jika ada suatu animasi di sebuah website itu otomatis dianggap Flash. Namun, anggapan itu tidak berlaku untuk saat ini. Dengan meningkatnya popularitas dan penggunaan tersebar luas kerangka kerja JavaScript, kadang-kadang Anda harus melihat lebih dekat untuk mengetahui apa yang powering semua animasi yang halus.

Dengan kerangka JavaScript yang tersedia, jQuery dengan cepat menjadi favorit. Jika Anda tertarik menggunakan jQuery untuk efek animasi, di sini adalah 13 tutorial yang sangat baik untuk membantu Anda di jalan Anda.

Building an Animated Cartoon Robot with jQuery

Building an Animated Cartoon Robot with jQuery

Animate a hover with jQuery

<br /> Animate a hover with jQuery

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

CSS Sprites2 – It’s JavaScript Time

CSS Sprites2 - It's JavaScript Time

Build An Incredible Login Form With jQuery

Build An Incredible Login Form With jQuery

Learning jQuery: Revealing Photo Slider

Learning jQuery: Revealing Photo Slider

Learning jQuery: Fading Menu – Replacing Content

Learning jQuery: Fading Menu - Replacing Content

Using jQuery for Background Image Animations

Using jQuery for Background Image Animations

Animated Menus Using jQuery

Animated Menus Using jQuery

Create a Cool Animated Navigation with CSS and jQuery

Create a Cool Animated Navigation with CSS and jQuery

Animated Drop Down Menu with jQuery

Animated Drop Down Menu with jQuery

jQuery Tutorials for Designers

jQuery Tutorials for Designers

How to Load In and Animate Content with jQuery

How to Load In and Animate Content with jQuery

Sumber : webdesignledger

13 Super Useful jQuery Content Slider Scripts and Tutorials

Filed under: Artikel Terbaru, JQuery — Tags: , , , , — Fobita @ 10:49 pm

Anda mungkin telah memperhatikan bahwa banyak situs web akhir-akhir ini memiliki area fitur dengan konten yang slide atau perubahan dalam beberapa cara. Adalah teknik yang bagus untuk menunjukkan beberapa konten dalam jumlah terbatas ruang dan cara yang baik untuk melibatkan pengguna. Jika Anda sudah bertanya-tanya bagaimana hal ini dibuat, berikut adalah 13 tutorial yang sangat berguna dan script yang akan membantu Anda membuat jenis efek dengan menggunakan jQuery.

jQuery Tools Scrollable

jQuery Sliders

AnythingSlider jQuery Plugin

jQuery Sliders

Sliding Boxes and Captions with jQuery

jQuery Sliders

Making a Content Slider with jQuery UI

jQuery Sliders

Creating a Slick Auto-Playing Featured Content Slider

jQuery Sliders

Create Featured Content Slider Using jQuery UI

jQuery Sliders


jQuery Sliders

Moving Boxes

jQuery Sliders


jQuery Sliders


jQuery Sliders

Using the Wonderful jFlow Plugin

jQuery Sliders

Create Beautiful jQuery slider tutorial

jQuery Sliders

Step By Step To Create Content Slider using jFlow

jQuery Sliders

Sumber : webdesignledger

January 27, 2011

[HOT] 6 Situs Web Untuk Membuat Komik

Filed under: Artikel Terbaru, Komputer, Tahukah Kamu — Tags: , , — Fobita @ 7:39 am

Membuat sebuah komik bukanlah sesuatu hal yang kompleks dan butuh kemampuan lebih dalam menggambar. Kebanyakan komik memang menciptakan gambar yang indah, tapi tidak semuanya lucu. Terima kasih pada Internet yang mengajarkan kita untuk lebih mengapresiasi komik inferior atau bermutu rendah di sisi gambar.

Penggandrung komik lucu tak memikirkan bagus tidaknya gambar pada komik tersebut. Yang penting bagi mereka adalah lucu, menghiburbisa membuat gelak tawa. Dan, mereka pun kini dapat menciptakan komiknya sendiri. Anda mungkin termasuk salah satu di dalamnya.

Bukan sesuatu hal yang mustahil jika Anda menciptakan komik buatan sendiri. Ia memiliki cita rasa yang khas dan mampu merepresentasikan tokoh yang ada di kepala Anda selama ini secara lebih spesifik tanpa harus menggambarnya.

Siapa pun bisa membuat rangkaian komik atau dikenal dengan comic strip. Siapa pun bisa menjadi komikus. Kabar terbaiknya adalah Anda dapat menciptakan komik dengan mudah sesuai selera Anda di Internet.

Berikut enam situs yang menyediakan fasilitas pembuatan komik secara gratis:


Sangat mudah digunakan sehingga cocok bagi pemula dan anak-anak. Tapi, bukan berarti komik ini terlalu sederhana. Pengguna dewasa pun bisa membuat plot yang lebih serius dengan berbagai opsi fitur di dalamnya.

Ada 25 karakter yang bisa digunakan untuk mengisi dua, tiga, hingga empat panel comic strip. Sementara ini, MakeBeliefsComix sudah mendukung tujuh bahasa. Hanya satu kekurangannya: warna. Anda bisa menggonta-ganti warna latarnya, tetapi karakternya tetap hitam putih.

2. Create Your Own Comic

Kalau urusan komik, nama Marvel memang rasanya sudah tidak asing. Tak heran jika komik-komik yang dihasilkannya cukup bagus. Begitu pun situs ini, sangat berbeda. Anda dapat mencoba berbagai template comic strip, tak hanya empat atau enam kotak persegi. Anda bisa mencoba yang zig-zag, trapesium, dan sebagainya.

Di sini, Anda bisa membuat komik dengan 22 halaman. Tool untuk membuat efek pada gambar mirip dengan Photoshop. Di sini, tersedia berbagai karakter Marvel yang sangat familiar, seperti Hulk, Falcon, sampai Wolverine.

3. Pixton – The world’s best online comic-making software

Ini adalah website pembuatan komik untuk para seniman. Situs ini memungkinkan Anda melakukan kreasi dan kustomisasi sebebas mungkin tanpa harus membuat goresan. Misalnya, untuk sebuah karakter, Anda disuguhkan sejumlah opsi untuk memilih kerah, bentuk tubuh, lengan, dan ukuran baju.

Anda bisa mengubah emosi masing-masing karakter dengan mengubah posisi mata, telinga, hidung, dan gaya rambut. Selain itu, juga menggeser badan dan menyeret kakinya sesuai yang Anda mau. Semuanya dilakukan cukup dengan klik pada objek yang ingin Anda ubah atau customize.

4. ToonDoo - World’s fastest way to create cartoons!

ToonDoo bisa dikatakan pilihan tepat untuk kombinasi antara kreativitas nan fleksibel dan user friendly. Kebanyakan hasilnya cukup memuaskan dan tajam. Meski banyak karakter dan benda-benda yang tersedia untuk dipakai, Anda juga dibolehkan untuk menggambar karakter yang Anda ingingkan dengan tangan sendiri dengan TraitR dan DoodlR untuk mewarnainya.

Berbeda dengan situs lain, di sini ada opsi untuk menyimpan proyek sampai mengkompilasi buku. Jika terhenti di tengah jalan, Anda bisa menyambungnya kapan saja.

5. Strip Generator

Jika sebelumnya kita diberi ruang kreativitas seluas-luasnya, tidak demikian di website Strip Generator. Di sini Anda membuat komik dengan apa yang diberikannya pada Anda. Tapi, bukan berarti Anda tidak bisa berkreatif.

Strip Generator unggul pada frame atau comic strip yang bisa disesuaikan. Lebar atau sempitnya sebuah sel bisa Anda tentukan sendiri dengan men-drag frame tersebut. Di sini Anda juga diberikan perpustakaan pribadi. Seperti apa? Anda harus mencobanya.

6. Pikistrips - Comic strips for fun

Foto Anda bisa dimasukkan ke dalam comic strip dan Anda menjadi tokoh utamanya. Cukup mudah digunakan. Anda bisa mengkustomisasi format cell, text bubble, dan objek lainnya. Galeri objek atau benda yang dipunyainya sangat banyak dan teratur.

Anda bisa memulainya dengan megubah gaya rambut, topi, kumis, bekas luka, sampai tato. Akan sangat menyenangkan jika tokoh yang dipermak itu memakai wajah Anda sendiri. Tak perlu khawatir wajah Anda akan terlihat kaku, karena Pikistrips bisa “menyulapnya ” seperti gambar komik.

Sumber :

February 11, 2010

10 Orang Yang Berpengaruh di Dunia Web

Filed under: Artikel Terbaru, Tahukah Kamu — Tags: — Fobita @ 10:02 am

Hanya untuk berbagi pengetahuan dan informasi saja tentang siapa saja orang-orang yang berperan penting di dunia web:

1. Eric Schmidt, Larry Page, dan Sergey Brin, Eksekutif Google
Larry Page and Regei BrinJika harga saham Anda mencapai USD 500 per lembarnya, Anda berarti berhasil mengumpulkan uang sebanyak USD 33 miliar. Anda dapat menjalankan mesin pencari yang paling ramai trafiknya di Internet. Proyek kecil-kecilan Sergey Brin dan Larry Page asal Stanford berkembang menjadi gardu Web yang paling banyak dibicarakan dan salah satu dari beberapa nama pada daftar ini berubah menjadi verba. Schmidt meninggalkan Novell untuk bergabung dalam jajaran direktur Google pada tahun 2001 dan segera menjadi CEO perusahaan itu. Dengan mendominasi dunia periklanan online, Google sepertinya siap melakukan perjalanan akuisisi dan membeli YouTube menandakan langkah besar terhadap dominasi menyeluruh dalam bisnis Web.

2. Steve Jobs, CEO Apple
steve jobsTidak ragu lagi Anda pasti bosan dengan penghargaan media seputar aksi CEO Apple ini. Tetapi ketika seseorang mengaplikasikan gema musik gratis DRM ke seluruh dunia, sulit mengacuhkan kekuatan pengaruh pria tersebut. Jobs mempopulerkan download musik, acara TV, dan film secara legal. Melalui iPhone yang akan dirilis dalam waktu kurang dari lima bulan lagi, demonstrasinya pada MacWorld Expo memberi saran bahwa produk ini kemungkinan mempopulerkan Internet browsing menggunakan perangkat mobile.

3. Bram Cohen, Cofounder BitTorrent
Bram Cohen, Cofounder BitTorrentSistem P2P seperti KaZaA dan eDonkey adalah produk tahun lalu. Masa depan adalah segala sesuatu yang berhubungan dengan BitTorrent, penggagas ahli matematika dan anak ajaib dalam dunia pemrograman Bram Cohen. BitTorrent dikembangkan pada 2001 dan mendapatkan popularitas sebagai cara pen-download-an file besar (seperti film) dengan pembagian beban melalui hardware dan bandwidth. Kecakapan teknologi ini menangani file besar membawa Cohen berselisih dengan Motion Picture Association of America, yang meminta BitTorrent memindahkan konten berhak cipta dari jaringannya. Tetapi penarikan itu tidak menghambat kerjanya. Dilaporkan lebih dari sepertiga trafik Web saat ini berasal dari klien BitTorrent. BitTorrent dan kalangan raksasa dunia hiburan sejak lama telah menggabungkan kekuatan mereka. BitTorrent Entertainment Network yang baru saja dilansir mengeluarkan ribuan film standar industri, acara televisi, game, dan lagu-lagu untuk dijual dan disewa.

4. Mike Morhaime, Presiden Blizzard Entertainment
Mike Morhaime, Presiden Blizzard EntertainmentDalam dunia online gaming, terdapat World of Warcraft, dll. Dengan jumlah pemain sebanyak 8 juta di seluruh dunia, Blizzard meraup keuntungan sebesar USD 1,5 miliar setahun dari WoW. Setiap pemain dengan terengah-engah terus memperhatikan Mike Morhaime bila ada kesempatan untuk mendapatkan Blade of Eternal Justice. Seperti dengan Second Life, keseluruhan bisnis dunia nyata berdasarkan teknologi game. Tidak seperti Second Life, walaupun bisnis ini mengeksploitasi ekonomi dan permainan game WoW, keseluruhannya tidak memberikan sambutan yang baik.

5. Jimmy Wales, Founder Wikipedia
Jimmy Wales, Founder WikipediaBanyak pengunjung online menganggap ensiklopedi Internet Wikipedia sebagai penghentian pertama dan terakhir dalam pencarian sebuah topik. Konten yang dihasilkan penggunanya menjadi sangat dapat diandalkan sehingga majalah Nature mendeklarasikannya sebagai “sumber yang hampir seakurat [Encyclopedia].” Situs tersebut dikutip sebagai sumber informasi dalam lebih dari 100 keputusan pengadilan di AS sejak 2004. Tetapi popularitasnya juga menjadikan Wikipedia sebagai target oleh para spammer, kasusnya sangat banyak sehingga Wikipedia untuk sementara waktu memblokir akses dari seluruh negara Qatar untuk aksi pengeditan. Untuk menggagalkan usaha spammer, Wales putuskan penghapusan tag “nofollow” pada link eksternal, memberitahukan mesin pencari untuk mengacuhkan link dalam mencegah peningkatan buatan terhadap peringkat mesin pencari target link ini. Strategi ini menjamin keunggulan Wikipedia bahwa pencarian akan terus meningkat. Tetapi Wikipedia hanyalah langkah awal Wales. Ia juga meluncurkan mesin pencari pribadi bernama WikiSeek yang melakukan pencarian terhadap situs-situs yang disebutkan dalam Wikipedia.

6. John Doerr, Venture capitalist pada Kleiner, Perkins, Caulfield & Byers

John Doerr, Venture capitalist pada Kleiner, Perkins, Caulfield & ByersMantan salesman Intel, John Doerr telah menjadi raja aset enterprise di Silicon Valley sejak 27 tahun lalu dan melakukan investasi dalam bisnis teknologi mulai dari Sun Microsystems,, hingga Google. Jeff Bezos (lihat nomor 24) pernah menggambarkan Doerr sebagai “pusat gravitasi Internet.” Doerr juga menyertakan uang untuk menyokong kampanye politik, mendukung inisiatif pemilihan suara negara bagian yang cukup kontroversi di California terkait energi alternatif, dan penelitian stem-cell.

7. Craig Newmark, Founder Craigslist

Craig Newmark, Founder CraigslistDalam situsnya tidak terdapat iklan, mengenakan biaya sangat rendah terhadap sebagian kecil pengunjungnya, memiliki domain “.org,” dan memiliki 23 pekerja. Saat ini meskipun memiliki tampilan sederhana, Craigslist mengakumulasikan 14,1 juta tampilan halaman Desember lalu dan menjadi situs ke-52 yang paling banyak dilihat Desember lalu berdasarkan comScore Media Metrix. Craigslist milik Newmark menjadi candu bagi banyak pihak yang secara spontan menyegarkan kembali daftar barang-barang gratis, “bersambutan hangat,” dan iklan pribadi selagi lari dari pekerjaan sehari-hari. Hal yang paling penting, situs itu dengan kekuatannya sendiri hampir menghancurkan bisnis iklan yang dikategorikan sebagai offline. Di area pantai San Francisco saja, satu penelitian menemukan, situs tersebut menguras USD 65 juta per tahun dengan porsi iklan pendukung kelangsungan hidup surat kabar lokal.

8. Peter Levinsohn, Presiden Fox Interactive Media

Peter Levinsohn, Presiden Fox Interactive MediaFox Interactive Media, bagian dari News Corporation milik Rupert Murdoch, adalah salah satu unit Web terkuat dan mengendalikan 13 situs dengan jangkauan mulai dari hingga yang paling kontroversial, pelengkap bagi siaran film tradisional dan properti televisi News Corp. Divisi yang berfokus pada Internet meliputi top 10 properti yang dikunjungi di dunia pada Desember 2006, berdasarkan comScore World Metrix. Menurut TechCrunch, kemungkinan akan terdapat tambahan lainnya, ketika Fox Interactive memiliki USD 2 miliar uang pengakuisisian untuk digulirkan.

9. Marissa Mayer, Vice president Google untuk search products & user experience
Marissa Mayer, Vice president Google untuk search products & user experienceRatu produk Google mengawasi berbagai daftar layanan Web dan perangkat raksasa pencarian ini, seperti Google Maps, Google Desktop, dan Google Base, serupa layanan e-commerce eBay. Wanita nomor satu di Google ini bergabung dalam perusahaan tersebut sebagai insinyur perempuan pertama pada 1999. Ia sebelumnya adalah pegawai perusahaan di nomor dan bekerja mengembangkan tampilan minimalis Google yang saat ini cukup familiar. Tetapi jangan menyalahkannya atas semua pekerjaan dan jangan main-main terhadapnya. Menurut situs Google, ia mengorganisasi pegawai tugas malam.

10. Chad Hurley dan Steve Chen, Founder YouTube
Chad Hurley dan Steve Chen, Founder YouTubeWalaupun Google mengakusisi perusahaannya, founder YouTube, Chad Hurley (CEO) dan Steve Chen (CTO) sepertinya mengkampanyekan semua hal agar bisa terealisasi. Tokoh video Internet ini memperkenalkan rencana pembayaran user atas video, dan perusahaan ini juga menandatangani beberapa kemitraan konten media besar (dengan MTV, NBC, Warner Music, dll). Rekan co-founder, Jawed Karim malah meninggalkan perusahaan itu dan mengejar gelar master dalam bidang sains komputer di Stanford University.

Sumber :

Powered by WordPress

Switch to our desktop site