IDbyte 2013 Start-Up Hunt Is Calling For Entries!

 

 

ARE YOU THE NEXT WORLD CLASS COMPANY?

IDbyte 2013 Start-Up Hunt Is Calling For Entries!

Submit your start-up now and get the chance to win these following prizes:

-WIN A TRIP with Geeks On A Plane (www.geeksonaplane.com) to Middle East or Latin America

-Opportunity to be invested USD 50,000 by Dave McClure from 500Startups

-Mentoring session with Shinta Dhanuwardoyo from Nusantara Ventures, founder of Bubu.com

-Mentoring session with Sandiaga Uno, Indonesian Entrepreneur and Prize IDR 25,000,000 from Indonesia Setara For more information and schedule, go to www.id-byte.com

Posted in Events | Tagged | 1 Comment

Membicarakan Investor di Meetup suWec

Meetup suWec Selasa malam, 15 Januari beberapa hari lalu membahas seputar investment. Peserta yang hadir dalam meetup suWec malam itu dari beberapa kalangan. Ada mahasiswa-mahasiswa dari ITS, Unair, UWK, UPN, dan ITATS. Di antara para mahasiswa tersebut juga sudah mempunyai startup business.

Selain dari kalangan mahasiswa, hadir juga beberapa profesional di bidang web/mobile app, developer, designer. Mereka sangat tertarik untuk mengetahui seputar dunia investment.

Sebelum masuk ke bahasan utama, pada sesi startup showup! ada perkenalan dari Hatim, founder rattil.org. Rattil adalah social media untuk saling berinteraksi dalam hal bacaan al-quran. Hatim berkebangsaan Arab Saudi. Pada sesi ini, Brian Arfi juga menceritakan tentang ShooP! Sebuah aplikasi mobile untuk mempermudah mengepost foto produk di toko online.

Lalu, masuk ke sesi bahasan seputar investment. Hari Wijayanto sebagai pembicara memperkenalkan latar belakang profesinya yang pernah menangani hubungan startup dengan investor, dan seringkali berhubungan dengan dunia investment. Hari memulai dengan bahasan tentang bisnis seperti apa yang menarik untuk diinvest, kemudian, bagaimana cara bernegosiasi dengan investor, lalu membahas tentang skema investasi.

Brian Arfi pada malam itu juga share tentang pengetahuannya seputar investor. Struktural investor, tipe-tipe investor, dan lainnya. Kesimpulan bahasan tentang investor tersebut adalah, siapkan bisnis dengan baik, investor akan tertarik. Jika investor tertarik, pelajari juga background investor tersebut, dan jangan takut untuk bernegosiasi.

Setelah bahasan selesai, banyak tercipta diskusi menarik pada meetup tersebut. Bahasan dan diskusi tak terasa sampai larut. Konsumsi sudah habis. Foto-foto pun sudah. Acara berakhir.

Foto-foto dokumentasi acara ada di sini.

Posted in Web Business | Tagged , , , , , , | Leave a comment

suWec Meetup – Mengenal Seputar Investor

Temen-temen,

Dalam waktu dekat ini, kita akan meetup lagi. Tepatnya pada Selasa, 15 Januari 2013 pukul 18.30.

Apa yang akan dibahas pada meetup ini? Yaitu seputar dunia investor. Jika temen-temen akan punya usaha, sudah punya usaha atau produk, bahasan ini penting untuk diikuti. Bagaimana mempersiapkan produk yang layak diinvest? Apa saja yang dilakukan jika sudah diinvest?

Pertanyaan-pertanyaan tersebut akan dijawab pada meetup tersebut. Panelis yang akan membahas tema tersebut:

Hari Wijayanto (Praktisi Bidang Investment)

Brian Arfi Faridhi (Entrepreneur)

Tempat: Aiola Cafe Surabaya Jl. Slamet 16 Surabaya

Ada free welcome drink (halal) untuk 40 peserta pertama 😀

Jika ingin mengikuti meetup ini, silakan datang ke lokasi acara. Acara ini gratis dan terbuka untuk umum.

Posted in Events | Tagged , , , , , , , | Leave a comment

Mengenal dan Menggunakan Framework CSS Twitter Bootstrap

Kita mungkin sudah akrab menggunakan framework CSS baik fixed seperti Blueprint, 960.gs maupun yang responsive/adaptive seperti lessframework, cssgrid, skeleton, 320andup, foundation dan tentu masih banyak lagi yang lainnya. Kali ini mari kita mengenal CSS framework bernama Bootstrap yang dikembangkan developer Twitter.

Mengapa Menggunakan Bootstrap?

Bootstrap memang bukan framework baru, bahkan versi terbarunya adalah Bootstrap 2.1.1 yang support responsive design. Mengapa kita perlu mengenal CSS framework ini? Tentunya karena framework ini begitu lengkap, memiliki dokumentasi yang komplit. Selain itu bootstrap memiliki komponen-komponen dan fitur yang lengkap seperti penjelasan dibawah.

Langkah Awal Menggunakan Bootstrap

Untuk menggunakan bootstrap, silakan mendownload terlebih dahulu Twitter Bootstrap dengan mengunjungi homepagenya di http://getbootstrap.com. File yang terdownload [boostrap.zip] mengandung 3 folder aset dari bootstrap yakni seperti gambar berikut:

Berikut isi dari 3 folder aset tersebut:

bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  ├── img/
  │   ├── glyphicons-halflings.png
  │   ├── glyphicons-halflings-white.png

  1. css/bootstrap.css berisi style dasar (reset, layout, typography, button) bawaan bootstrap.
  2. css/bootstrap-responsive.css berisi setting responsive desain. Kita bisa memakainya bersama bootstrap.css untuk membuat style bootstrap menjadi responsive.
  3. css/bootstrap-min.css dan
  4. css/bootstrap-responsive-min.css versi compressed dari bootstrap.css dan bootstrap-responsive.css
  1. img/glyphicons-halflings.png dan
  2. img/glyphicons-halflings-white.png, adalah icon yang digunakan pada bootstrap dengan teknik spriting.
  1. js/bootstrap.js dan
  2. js/bootstrap-min.js adalah javascript untuk mengaktifkan berbagai fitur keren bawaan bootstrap.

Ok, seperti biasa, jika anda ingin mengkonvert psd ke file html, buatlah file index.html pada folder aset bootstrap.

Berikut contoh markup beserta penjelasannya:

[html]<br />
<!DOCTYPE html><br />
<html lang="en"><br />
<head><br />
<meta charset="utf-8"><br />
<title>Bootstrap Testing</title><br />
<meta name="description" content="Deskripsi Bootstrap Testing"></p>
<p> <!– Sertakan css bootstrap –></p>
<link rel="stylesheet" href="css/bootstrap.css">
<p> <!– Sertakan css bootstrap responsive untuk layout responsive –></p>
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<p> <script src="js/libs/modernizr-1.6.min.js"></script><br />
</head></p>
<p><body><br />
<!– Konten Utama di Sini –></p>
<p> <!– Jangan lupa menyertakan Jquery –><br />
<script src="http://code.jquery.com/jquery-latest.js"></script><br />
<!– Sertakan bootstrap.js –><br />
<script src="js/bootstrap.js"></script></p>
<p></body><br />
</html><br />
[/html]

Komponen-komponen yang dapat digunakan pada Bootstrap:

Sebagaimana saya sebutkan bahwa bootstrap memiliki fitur yang sangat lengkap. Anda bisa melihat dari dokumentasi yang disediakan.

Bootstrap menggunakan normalize.css untuk reset element html. normalize.css digunakan untuk tujuan menyamakan rendering semua elemen html (termasuk html5) di semua browser. Bootstrap juga terdiri dari setting body type dan link.

Bootstrap juga mendukung grid system sebagaimana yang terdapat di berbagai macam css framework. Kita tahu dengan adanya grid system kita menjadi lebih mudah dan cepat dalam mengelola layout pada posisi grid yang kita inginkan.

Contoh code:

[html]</p>
<div class="row">
<div class="span3"> Something in Grid 3 </div>
<div class="span3"> Something in Grid 3 </div>
<div class="span6"> Something in Grid 6 </div>
</div>
<p>[/html]

Jumlah grid maksimum adalah 12, untuk membagi grid dalama satu row, kita bisa menggunakan class .span1 hingga .span12

Elemen (termasuk tag-tag html) dasar yang biasanya membutuhkan styling mendetail telah distyle secara rapi, mulai dari heading, body, Code & pre, labels & badges, table, form hingga button. Nilai plusnya lagi, bootstrap menyediakan spriting icon (menggunakan icon glyphicon) jika kita hendak memasang icon pada markup html kita dengan langkah yang cukup mudah. Total 140 icon hitam dan icon berwarna putih (untuk background gelap) dengan jumlah yang sama.

Contoh code:

[html]<br />
<span><i class="icon-user"></i>Contoh Icon User</span><br />
<span><i class="icon-star icon-white"></i>Contoh Icon Bintang Putih</span><br />
[/html]

Juga, bootstrap menyediakan fasilitas lengkap yang siap pakai dan dapat dikustomisasi meliputi dropdown, navigasi, tombol-tombol, breadcrumb, pagination dan masih banyak lagi.

Element-element javacript yang disediakan meliputi beberapa komponen-komponen seperti tooltips, popovers, modals, dropdowns, collapse (accordion) dan carousel untuk slider.

Untuk responsive webdesign ada beberapa media query yang secara efault disetting dari awal yakni untuk ukuran layar tablet sampai mobile (<767px), tablet sampai desktop (767-979px), dan desktop lebar (>1200px). Tentu saja kita bisa mengubah settingan sesuai kemauan kita. Selain itu disediakan juga tag-tag khusus untuk mendukung responsive desain seperti class visible/hidden dan responsive menu (navbar).

Next Steps

Begitulah gambaran fitur dan cara dasar menggunakan Twitter Bootstrap. Dengan lengkapnya element dan stylenyang disediakan bootstrap, kita dapat mendevelop sebuah website dengan cepat. Oh ya, tampilan dan style yang ada di Bootstrap baik warna, button style, box, font dan lain-lain memang dibuat mirip dengan yang ada di website Twitter. Tentu saja kita bisa merubahnya dengan mengedit file bootstrap.css atau menambahkan file styling untuk mereplace properti style yang ada di bootstrap.css, misalnya menambahkan style.css. Selain membuat sendiri, kita juga bisa mendownload bootstrap theme dengan style berbeda di bootswatch.com

Tertarik menggunakan Bootstrap?

Posted in Web Programming | Tagged , , , | 7 Comments

Indonesia, Pasar Teknologi Superpower di Asia

Sebagai salah satu negara terbesar di dunia dengan pasar yang kuat dan terus berkembang, Indonesia berada dalam sorotan perusahaan –perusahaan global yang mencari kesempatan untuk melayani jutaan konsumen di Indonesia.

Indonesia, sebuah negara dengan lebih dari 250 juta jiwa yang menempati ribuan pulau, telah menjadi sensasi dunia dengan pertumbuhan ekonominya. Memegang gelar sebagai negara dengan pengguna Facebook terbesar di nomor 4 di dunia, dan terbesar ketiga di twitter, Indonesia telah mendapatkan perhatian dari perusahaan teknologi global yang mencari kesempatan untuk berada di pasar Indonesia.

Beberapa analist bahkan menempatkan Indonesia sebagai “the next big thing” dalam hal pasar teknologi, tokoh dibalik SparxUp 2012, Konferensi Technologi terbesar di Indonesia, sependapat dengan pernyataan tersebut. Chairman Rama Mamuaya telah berjejaring dengan banyak sekali pihak yang tertarik untuk berada di pasar Indonesia yang luar, pasar mobile ataupun internet dan apapun yang berkaitan dengan keduanya.

“Kami ingin membawa pembicara-pembicara terbaik dari International dan juga pembicara lokal untuk mengisi kesenjangan pengetahuan diantara mereka, kami percaya apabila kesenjangan pengetahuan ini telah diatasi, industri teknologi di Indonesia bisa lebih cepat untuk maju.” Dinyatakan oleh Mamuaya.

Teruhide Sato, Group CEO of Netprice Japan mennyampaikan “dalam setiap domain di bisnis Internet, seperti marketplace, payment, comparison, B2C, Online Ad, affiliate, community, O2O, games dan lainnya, kami akan melihat kesempatan yang sama, bahkan jauh lebih baik lagi 5 tahun ke depan dengan besarnya jumlah generasi muda, dan kelas menengah yang terus bertambah”. Sato akan hadir di SparxUp 2012 untuk membawakan presentasi keynote dengan tema ekspansi pasar, secara spesifik di Indonesia.

Blaast, perusahaan teknologi mobile berbasis di Finlandia memprioritaskan Indonesia untuk peluncuran produk terbarunya. “Indonesia muncul sebagai salah satu negara superpower di Industry Mobile, kombinasi dari 240 juta populasi penduduknya yang muda dan sangat antusias terhadap teknologi dan infrastruktur yang terus berkembang menempatkan indonesia sebagai negara Mobile pertama yang sangat menarik. Tersimpan kesempatan yang sangat besar pada pasar ponsel non smartphone saat ini, begitu pula dengan demokratisasi yang terjadi di pasar Smartphone yang semakin dekat. Alasan inilah yang menjadikan kami memprioritaskan Indonesia” ucap CEO Blaast, Joonas Hjelt, salah satu pembicara keynote di Conference SparxUp 2012.

“Menurut pendapat saya, cara terbaik untuk menciptakan bisnis internet di negara ini adalah dengan menyebarkan model bisnis yang telah terbukti, dengan didukung oleh metode dan teknologi terbaru, seperti Open source, cloud, agile development, perangkat mobile yang terjangkau dan diproduksi dan mendukung pasar dalam negeri, kemudian dipandu oleh entrepreners yang passionate dan inovatif” Sato menambahkan.

Matt Barrie, entrepreneur yang memiliki situs terbesar untuk para freelancer, Freelancer.com juga telah bergabung di SparxUp 2012 sebagai pembicara keynote dan sponsor. Hingga hari ini, lebih dari 2,5 juta proyek telah disalurkan dari pemilik proyek melalui situs Freelancer.com. Situs ini juga memenangkan Annual Webby Award sebagai Best Employment Site of the Year.

Selain speaker terbaik dari International, SparxUp 2012 juga mendatangkan pembicara dari lokal dengan pengetahuan yang luas tentang pasar lokal. Reza Prabowo, entrepreneur yang tinggal di Bandung akan membawakan materi pasar teknologi potensial diluar Jakarta. Saat ditanya mengenai mengapa Jakarta mendapatkan perhatian yang jauh lebih besar, Prabowo menyatakan “Jakarta selalu mendapatkan infrastuktur terbaru dan pertama, karena penyedia infrastuktur ada disana (Telco, ISP)”. Mengutip perlunya perhatian ke kota-kota lainnya sebagai pasar teknologi potensial.

Pembicara lokal lainnya adalah Ivan Hudyana dari Blibli.com. “Sebagai salah satu pemain asli Indonesia di Industri E-Commerce, kami berkomitmen untuk memfasilitasi tumbuhnya ide-ide baru dan Inovasi dari entrepreneur teknologi Indonesia” tambah Ivan, sebagai speaker Keynote dari Blibli.com, situs E-Commerce terdepan di Indonesia.

SparxUp tahun ini telah menjadi conference teknologi yang paling menarik dengan pembicara terbaik yang berkisar dari pengusaha, investor dan venture capitalist, dan professional di bidang IT yang akan membagi ilmu mereka ke audience. Conference ini terlalu menarik untuk dilewatkan, terutama kepada penggiat teknologi dan bisnis.

Untuk informasi terkait pembicara, tiket conference dan kesempatan untuk menjadi sponsor, silahkan mengunjungi situs resmi SparxUp http://www.sparxup.com.

Posted in Web Business | Tagged , , , , | Leave a comment

Konferensi, Kompetisi Startup dan Hackathon SparxUp 2012 Kembali Hadir

Jakarta, Indonesia – Sejak pertama kembali diadakan pada tahun 2010, Sparxup memiliki tujuan untuk membawa semangat di industri teknologi dan startup di Indonesia. Konferensi ini membawa Indonesia ke sorotan internasional dari investor, pengusaha dan perusahaan teknologi multi-nasional.

Sparxup adalah sebuah inisiatif dari tiga entitas: DailySocial, Kompas.com dan SemutApi, sebagai bentuk kontribusi untuk pertumbuhan Indonesia di bidang teknologi. “Mempromosikan industri teknologi dan startup di Indonesia selalu menjadi tujuan utama kami dengan Sparxup, salah satunya dengan membawa pengetahuan internasional untuk pengusaha lokal”, kata Rama Mamuaya, Chairman Sparxup 2012 yang juga pendiri DailySocial.

Rangkain acara Sparxup akan dimulai tanggal 3 Oktober di Jakarta dimana akan dimulai dengan sesi Hackathon untuk para programmer. Hackathon akan diadakan sepanjang malam sampai tanggal 4 Oktober, dilanjutkan dengan Demo Day untuk finalis kompetisi startup dan peserta Hackathon. Sesi Demo Day akan terbuka untuk publik atau investor yang ingin melihat finalis Sparxup startup dan hacker secara langsung.

Rangkaian acara akan mencapai puncaknya pada tanggal 5 Oktober 2012 dengan Konferensi Sparxup dan Awarding Night. Acara sehari penuh ini akan dihadiri pembicara dari perusahaan seperti Foursquare, Evernote, NetPrice Jepang dan bahkan Microsoft. Orang-orang ini akan berbagi pengetahuan internasional mereka kepada pengusaha lokal.

Selain pembicara internasional, pengusaha lokal seperti Hendrik Tio dari Bhinneka.com, toko online paling sukses di Indonesia, serta Ferry Tenka dari Groupon Indonesia akan berbagi pikiran mereka tentang adegan tech Indonesia bersama-sama dengan pembicara lain dari Yahoo! Indonesia, startup musik Ohd.io, dan perusahaan penyedia layanan komputasi awan, Infinys.

Tahun ini, Sparxup bekerjasama dengan Echelon, acara teknologi bergengsi di Singapura. Sparxup akan menjadi tuan rumah dari 5 startup pemenang kompetisi Echelon di booth area, dimana startup-startup tersebut akan mendapatkan kesempatan untuk bertemu pengguna dan calon rekanan di Indonesia.

Edi Taslim dari Kompas.com, salah satu organizer Sparxup berkata “Para pemenang Sparxup diharapkan bisa menjadi perusahaan teknologi yang sustainable”. Sebagai salah satu negara yang sekarang sedang dilirik pasar luar negeri, Indonesia butuh perusahaan-perusahaan teknologi yang inovatif dan juga sustainable.

“Sparxup merupakan salah satu event yang menjadi tolok ukur keberhasilan startup dalam mengembangkan produknya. Infinys sangat bangga dan merasa terhormat dapat menjadi bagian dari event penting ini” ujar Dondy Bappedyanto, General Manager Infinys, salah satu pendukung acara Sparxup. Herman Kwok dari SemutApi menambahkan “Beberapa pemenang Sparx Up Awards juga telah membuktikan kualitas mereka melalui penghargaan lain yang didapat dari dan luar negeri”, membuktikan bahwa kualitas para pemenang Sparxup memang patut dibanggakan.

Sparxup adalah acara yang cocok untuk dihadiri pengusaha teknologi lokal, investor profesional TI dan perusahaan teknologi luar negeri yang saat ini mengincar potensi pasar Indonesia. Namun selain itu, Sparxup juga merupakan acara yang sempurna bagi mahasiswa IT, calon pemimpin industri IT dan inovator masa depan. Sparxup memberikan insentif khusus bagi mahasiswa IT untuk dapat bergabung dengan konferensi dan mendapatkan ilmu dan jaringan dari acara Sparxup. Ini sejalan dengan visi besar Sparxup untuk menumbuhkan dan memperkaya industri teknologi di Indonesia, mulai dari akar.

Informasi lebih lanjut mengenai tiket, sponsor dan program dapat diperoleh melalui situs http://sparxup.com.

Posted in Events | Tagged , , , , , , | 1 Comment

Buka Bersama – Meetup suWec “Membuat Mobile App yang Bagus dan Menjual”

Halo teman-teman.. Besok Jumat, 10 Agustus 2012, suWec akan mengadakan meetup sekaligus buka bersama. Pada meetup kali ini, suWec akan menghadirkan founder Buffet Mania, Chua Meng Kiat. Buffet Mania adalah mobile app yang cukup sukses berkembang di Singapura, hanya dalam waktu 7 bulan. Detail tentang Buffet Mania bisa teman-teman baca di sini.

Selain itu, juga akan ada sesi startup showup.

Acaranya besok pada: Jumat, 8 Agustus 2012 Pukul 15.40 Di Ruang Workshop PT Otak Kanan, Lt. 3 Alamat: Ruko Wisma Mukti Jl. Arif Rahman Hakim 14A, Klampis, Surabaya

Acara ini gratis dan terbuka untuk umum. Tersedia makanan untuk buka puasa untuk 50 peserta.

So, jangan sampai ketinggalan acaranya. Daftar di sini: suwec.com/registrasi/

Posted in Events | Tagged , , , , , , , , , , | Leave a comment

Ngobrol Seru Seputar Desain Web/ Mobile App

Jumat, 13 Juli 2012, beberapa teman dari Surabaya Web Community (suWec) datang ke acara kumpul ngobrol bareng desainer. Ternyata yang datang tak hanya desainer. Pada Jumat malam itu, datang juga developer dan founder startup bisnis yang membuat aplikasi mobile.

Kemas Dimas yang pernah mengembangkan aplikasi mobile sharing tentang prinsip-prinsip yang digunakannya saat mendevelop aplikasi di mobile. Terutama dari segi desain.

Menurut Kemas, ketika kita mendevelop aplikasi mobile, kita harus tahu bagian-bagian yang terpenting dari aplikasi tersebut. Prioritaskan untuk menampilkan yang penting-penting saja. Ide dasar aplikasi mobile itulah yang harus diutamakan tampil. Kemudian, usahakan untuk mengedepankan prinsip simpel. Kalaupun ada ide baru yang ingin dimasukkan, tambahkan saja di menu baru yang tidak mengganggu tampilan awal.

Edy Pang menambahkan, mengingat behaviour pengguna mobile / gadget yang lebih sering menginginkan kesimpelan dan kesederhanaan, serta kenyataan bahwa layar di mobile lebih kecil dibandingkan desktop, maka dalam mendesain untuk mobile device, jangan lupa menerapkan prinsip prioritas, kesederhanaan, dan kesimpelan.

Selanjutnya, Edy Pang berbagi pandangan dan tips dalam mendesain website. Menurutnya, karena semakin beragam device, dan semakin banyak orang mengakses web secara mobile, maka tren desain website adalah website yang simpel. Desain web sekarang tidak hanya mengandalkan desain yang bagus, tapi juga harus mantap pada usability, termasuk user experience-nya.

Posted in Events | Tagged , , , , , , , , , , | Leave a comment

Membuat Form Pencarian yang Elegan dengan CSS3

Form pencarian merupakan salah satu elemen UI yang paling umum digunakan, dan saya kira tidak perlu dijelaskan tentang kegunaannya. Entah itu pada sebuah website atau aplikasi berbasis web, Anda perlu membuat field pencarian tampil lebih bagus, intuitif, dan juga elegan untuk meningkatkan user experience.

DEMO DOWNLOAD

Hari ini, kita akan belajar bagaimana membuat kotak pencarian yang bagus menggunakan CSS3 beserta pseudo-element.

Kode HTML

Mark up yang kita gunakan sangat sederhana, tidak neko-neko, dan ora umum!

[html]
<form class="form-wrapper cf">
<input type="text" />
<button>Cari</button>
</form>
[/html]


Anda mungkin memperhatikan atribut HTML5 seperti placeholder dan required, berikut penjelasan singkat tentang atribut-atribut ini:

  • placeholder – atribut ini menampilkan teks pada kotak pencarian jika sedang tidak berada pada kondisi focus, dan akan menyembunyikan teks tersebut jika pengguna sedang fokus berada pada kotak pencarian.
  • required – sebagai penanda bahwa elemen tersebut merupakan bagian yang wajib diisi dari sebuah form.

HTML5 juga menghadirkan sebuah nilai baru untuk type atribute yaitu: type=”search”. Karena inkonsistensi pada beberapa browser, kita tidak akan menggunakan fitur ini.

Elemen HTML seperti img dan input tidak memuat konten, sehingga pseudo-element seperti :before tidak akan berfungsi. Oleh karena itu pada artikel ini kita akan mengganti input untuk submit menjadi button. Dengan cara ini, kita tetap dapat menggunakan fungsi Enter untuk pengiriman form.

Kode CSS

Untuk keperluan float-clearing.

[css]
.cf:before, .cf:after{
content:"";
display:table;
}

.cf:after{
clear:both;
}

.cf{
zoom:1;
}
[/css]


Styling elemen pada form.

[css]
/* Form wrapper */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}

/* Form text input */

.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px ‘lucida sans’, ‘trebuchet MS’, ‘Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}

.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}

.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}

.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}

/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px ‘lucida sans’, ‘trebuchet MS’, ‘Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}

.form-wrapper button:hover{
background: #e54040;
}

.form-wrapper button:active,
.form-wrapper button:focus{
background: #c42f2f;
outline: 0;
}

.form-wrapper button:before { /* left arrow */
content: ”;
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}

.form-wrapper button:hover:before{
border-right-color: #e54040;
}

.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #c42f2f;
}

.form-wrapper button::-moz-focus-inner { /* menghilangkan kelebihan spacing pada button di Mozilla Firefox */
border: 0;
padding: 0;
}
[/css]


Selesai. Selamat mencoba!

Sunber: http://speckyboy.com

Posted in Web Programming | Tagged , , | 5 Comments

Pemahaman Dasar tentang Usability untuk Desain yang Intuitif

Pada artikel ini saya ingin berbagi beberapa pemahaman dasar untuk membangun sebuah user interface yang tepat guna. Merancang sebuah website merupakan tantangan bahkan saat Anda baru mulai menentukan komposisi warna dan mempersiapkan wireframe-nya. Berikut ini beberapa hal yang dapat membantu Anda menjawab tantangan tersebut, untuk dapat menyajikan sebuah website yang tampil intuitif.

Apa yang Dibutuhkan oleh Pengguna?

Akan banyak perdebatan dalam hal yang satu ini. Tentu mustahil untuk dapat membantu para pengguna secara langsung, dalam mendapatkan apa yang mereka butuhkan pada website, tetapi yang Anda perlukan adalah susunan layout dan struktur website yang akan menjalankan peran tersebut.

Anda perlu mencari tahu apa tujuan dari setiap halaman pada website tersebut. Kata intuitif sendiri dapat didefinisikan sebagai suatu keadaan di mana orang bertindak atas apa yang mereka rasa benar, tanpa berpikir secara sadar melalui proses yang dilewati.

Twitter bisa menjadi contoh yang bagus karena pada website tersebut Anda akan banyak menemukan bagian-bagian yang menjalankan fungsi dasar dari website yang intuitif. Pada halaman utama sangat jelas di mana Anda dapat melakukan pengaturan profil Anda atau untuk berbagi tweet baru.

Melayani Semua Pengguna

Masalah yang kadang muncul adalah tidak semua orang merasa intuitif dengan layout yang sama. Pengguna perlu melakukan beberapa tindakan untuk mencapai tujuan yang diinginkan – tetapi beberapa pengguna tersebut kadang kebingungan dan tidak tahu harus berbuat apa.

Sebuah website yang baik akan menyediakan beberapa konteks berbeda untuk bagian-bagian pada website yang memiliki konten lebih rumit dan berpotensi membuat pengguna kebingungan. Jika Anda ingat dengan Digg, pada masa-masa awalnya mereka menyediakan sebuah panduan berbasis JavaScript untuk menjelaskan setiap fitur pada website tersebut. Hal ini merupakan strategi yang tepat karena dapat berguna sebagai referensi pengunjungnya yang mungkin tidak tahu bagaimana menggunakan Digg.

Tapi jika Anda merasa bahwa halaman tutorial yang lengkap terlalu berlebihan, pertimbangkan untuk menambahkan beberapa tips-tips kecil tentang panduan penggunaan fitur yang mungkin asing bagi pengguna baru.

Lakukan Sebuah Percobaan

Anda perlu untuk sesekali menghubungi beberapa orang untuk teknik percobaan ini. Saran saya adalah untuk membentuk sebuah kelompok kecil terdiri dari beberapa individu dari latar belakang teknis yang berbeda untuk mencoba setiap layout yang Anda rasa kurang meyakinkan.

Anda mungkin bisa juga berbagi link kepada orang lain untuk mencoba layout yang sedang Anda kembangkan. Namun Anda tidak bisa berada di sana secara langsung untuk memperhatikan bagaimana mereka berinteraksi dengan website Anda.

Membangun sebuah interface yang intuitif akan membutuhkan waktu dan banyak latihan. Dunia digital semakin mengaburkan perbedaan teknologi antara mobile & web, sehingga hal ini akan membuat kita lebih mudah untuk menuangkan ide-ide baru ke dalam sebuah proyek. Semoga bermanfaat.

Sumber: http://speckyboy.com

Posted in Web Design | Tagged , | Leave a comment