Design and Creative

Struktur Program Borland C++

Dasar untuk belajar suatu bahasa pemrograman salah satunya yaitu mengetahui struktur penulisan bahasa pemrograman tersebut.Struktur dapat diibaratkanformat penulisan seperti halnya kita menulis makalah,puisi ataupun surat lamaran. Dengan mengetahui struktur bahasa pemrograman maka akan mempermudah dalam membuat suatuprogram atau aplikasi tertentu. Struktur program C++ di semua compiler bahasa pemrograman C++ pada dasarnya sama, hanya saja ada perbedaan sedikit diantara beberapacompiler.  Tapi pada pembahasan kali ini, kita akan membahas struktur program C++ menggunakan compiler Borland C++ versi 5.02. Kita akan langsung terapkan pada contoh:

//program C++ pertama sukma

#include <iostream.h>

#include <conio.h>

main(){

                cout<<"Hello World !!!!!";

                getch();

}

Output:
                Hello World !!!!!

Penjelasan script program di atas:

•  //program C++ pertama sukma

Baris ini merupakan komentar yang menjelaskan program. Komentar dalam bahasa pemrograman C++ tidak mutlak wajib. Komentar dalam bahasa pemrograman C++ berfungsi untuk menjelaskan tentang program,scrip,dll pada program yang membantu programmer menganalisa suatu script program. Komentar dalam bahasa pemrograman C++ di tandai dengan tanda // atau /* ......*/.  Apabila ada kata-kata atau kalimat yang berada di tanda tersebut maka tidak akan berpengaruh pada program karena tidak dibaca oleh compiler.

• #include <iostream.h>
• #include <conio.h>

#include merupakan Preprocessor Directive yang berfungsi untuk memberitahu kepada compiler bahwa program yang kita buat menggunakan file-file yang didaftarkan/ fungsi-fungsi yang berada pada  file header. File Header sendiri merupakan file dengan ekstensi h(.h), contoh iostream.h, conio.h .  Tanpa Preprocessor Directive dan file header program tidak akan jalan, dan cout<<,getch() tidak akan berfungsi.

• Main()

fungsi yang menjadi inti dari program dan merupakan awal dan akhir eksekusi. Fungsi ini harus ada dalam setiap program.

Tanda kurawal buka { merupakan tanda awal fungsi main dan tanda kurawal tutup } merupakan tanda berakhirnya fungsi main.

• cout<<"Hello World !!!!!";

cout <<  Merupakan perintah yang biasa dipakai untuk menampilkan suatu keluaran pada layar. Untuk menggunakan perintah ini kita harus mengetikkan file header iostream.h .

• getch();

merupakan perintah untuk menahan layar, supaya program yang dijalankan tertahan dan dapat dilihat oleh user, program akan keluar jika user menekan tombol ENTER pada keyboard. Untuk menggunakan perintah ini kita harus mengetikkan file header conio.h .

*hormatilah sesama bloger :)

Kelebihan dan Kekurangan Windows 8 di Mata Developer

Kelebihan dan kekurangan apa saja yang ada di Windows 8?

Microsoft kini membuka toko aplikasi online di Windows 8, yang diberi nama Windows Store. Dengan adanya toko aplikasi online ini, para pengguna diharapkan tertib mengunduh aplikasi dari Windows Store. Ini memudahkan developer dalam mengontrol aplikasi mereka.

Yusak Setiawan dari TigaBelas Technology mengatakan, Windows Store membuka peluang bagi developer Indonesia untuk menembus pasar global. Microsoft telah membuka pendaftaran akun Windows Store sejak Agustus 2012 . Agar sebuah aplikasi masuk ke Windows Store, dibutuhkan penilaian yang cukup ketat.

"Ketat memang. Lebih ketat dibandingkan Android. Tapi kalau dibandingkan dengan iOS, masih lebih ketat iOS," kata Yusak.

Agar sebuah aplikasi bisa masuk ke Windows Store, pihak pengontrol dari Microsoft memeriksa terlebih dahulu konten dan kerapihan tampilan antarmuka penggunanya (User Interface/UI). Waktu yang diperlukan untuk pemeriksaan itu kurang lebih sepekan. Jika UI sebuah aplikasi menyimpang dari ketentuan, bisa jadi tidak lolos.

Selain kategori game, aplikasi yang ingin masuk ke Windows Store, diharuskan mengusung tampilan Windows 8-style UI, mengacu pada desain kotak-kotak seperti bentuk lantai. Tampilan ini sebelumnya akrab disebut Metro Style. Namun, sejak Agustus lalu, Microsoft mengubah nama Metro Style menjadi Windows 8-style UI. Selain itu, developer juga bisa memanfaatkan fitur Live Tile untuk menyajikan konten terkini dan Charm Bar agar aplikasi terkesan lebih hidup dan interaktif.

Windows 8 kini tidak hanya berjalan di PC, tapi juga di tablet yang menggunakan prosesor berarsitektur x86 dan ARM.

Keberadaan komputer kategori baru convertible, juga membuka peluang bisnis baru bagi developer. Convertible adalah komputer yang bisa difungsikan sebagai tablet ataupun PC. Beberapa produsen komputer membuat komputer yang bisa digeser. Jika dibuka atau digeser ke atas, ia akan berwujud seperti notebook. Tapi jika ditutup atau digeser ke bawah, ia nampak seperti tablet. Ada pula produsen yang membuat tablet, namun disertai dengan dock papan ketik (keyboard).

Vice President Navcore Nextology Farid Zulkarnain berpendapat, komputer convertible menjawab permasalahan pengguna tablet yang selama ini kurang nyaman bekerja dengan sentuhan jari. "Bagaimanapun, banyak orang yang lebih nyaman bekerja dengan keyboard, touchpad, ataupun mouse," kata Farid saat dijumpai KompasTekno beberapa waktu lalu.

Di sinilah tantangan baru bagi developer, bagaimana membuat aplikasi untuk dua modus bentuk fisik, sehingga aplikasi tersebut nyaman digunakan saat convertible difungsikan sebagai tablet maupun PC.

Kekurangan

Sejak windows 8 hadir, Microsoft menginginkan agar semua aplikasi (kecuali game) dapat mengadopsi tampilan Windows 8-style UI. Beberapa pengembang aplikasi sebenarnya kurang nyaman dengan peraturan ini. Semua aplikasi akan terlihat sama, dengan desain kotak-kotak. Dalam pelatihan membuat aplikasi Windows 8, pertanyaan semacam ini sering dilontarkan para developer.

"Nilai keunikan sebuah aplikasi jadi hilang. Semua jadi kotak-kotak," kata Yusak.

Untuk mengakalinya, menurut Yusak, developer bisa memainkan desain pada latar belakang, tata letak, ataupun teks.

Ada pula developer yang menganggap tampilan kotak-kotak ukuran terkecil di Windows 8 masih terlalu besar. Jika pengguna memasang banyak aplikasi, maka akan terlihat banyak kotak-kotak berjejer ke kanan. Pengguna harus terus menggeser halaman tampilan utama untuk mencari aplikasi yang hendak dibuka.

Namun, pengguna ini bisa mengatasi masalah ini dengan masuk ke modus tampilan desktop.

Untuk membuat aplikasi di Windows, dibutuhkan software Visual Studio, yang di dalamnya terdapat alat-alat untuk membangun aplikasi. Bagi perusahaan rintisan (startup), harga software Visual Studio terbilang mahal. "Kalau mau bikin aplikasi keren, pakai Visual Studio versi Express. Tapi harga lisensinya mahal. Ini berat untuk startup yang masih merintis seperti kita," kata Dedi Mulyana dari Garuda Studio asal Bandung.

Para developer juga berharap, Microsoft dapat melakukan sosialisasi mendispilinkan pengguna agar mengunduh aplikasi dari Windows Store. Ini dilakukan untuk menekan angka pembajakan aplikasi. Selain itu, beberapa developer juga berharap Microsoft bisa menjual aplikasi berbayar dalam mata uang Rupiah, sebagau upaya meningkatkan kesadaran menggunakan aplikasi berbayar, dan dapat mendorong penciptaan aplikasi lokal.

Sumber : Kompas.com

Sekilas Tentang Microsoft Office 2013 (New Release)

Salah satu produk baru dari Microsoft adalah Office 2013. Penerus dari Office 2010. Saat ini tersedia versi previewnya untuk didownload secara gratis. Kemarin saya mencoba download Office 2013 atau lebih tepatnya sih Office 365 Home Premium. Hampir sama antara keduanya mungkin harganya yang berbeda. Berikut ini sekilas ulasannya.



Office 365 Home Premium terdiri atas Word, Excel, Powerpoint, Access, Outlook, Publisher dan OneNote. Salah satu program Office 2013 yang sering saya pakai adalah Word. Kini Anda bisa menyisipkan gambar dan video langsung dari menu Word. Di-play langsung juga bisa. Selain itu ada menu screenshot, Anda bisa mengambil screenshot dan langsung masuk ke Word. File pdf bisa dibuka dan diedit langsung. Tulisan Anda di Word juga bisa langsung dipublish ke blog.

Tampilannya seperti dibawah ini, lebih minimalis dibanding Office terdahulu namun lebih komplit fiturnya.



Kalau diklik bagian File maka muncul menu seperti ini. Anda bisa menyimpan file langsung ke Skydrive.



Dibawah ini tampilan saat membuka PowerPoint. Ada beragam template dimana kalau kurang Anda bisa cari secara online lewat menu Search yang tersedia.



Tampilan PowerPoint Office 2013.



Tampilan Excel Office 2013.



Halaman depan Access 2013. Bisa pilih beragam template.



Buat berkirim surat bisa memakai Outlook Office 2013. Saya coba dengan akun Gmail bisa langsung on tanpa perlu banyak setting.



Publisher Office 2013



Buat menulis catatan dsb ada OneNote Office 2013.



Office 2013 ini memang lebih banyak ke layanan online baik fitur maupun penyimpanannya. Menurut saya lebih manteb dari versi sebelumnya. Walau seringnya cuma pakai Word buat ngetik-ngetik dan excel buat ngitung utang

Buat yang ingin mencoba Office 365 Home Premium bisa meluncur ke microsoft.com/office/preview. Preview ini bisa dipakai buat 60 hari. Tapi koneksinya harus kenceng karena installnya secara online. 

gimana sudah lihatkan bagaimana ms.office itu . semoga anda bisa belajar dari pengalaman saya ini



Semoga Bermanfaat :)

TUTORIAL INSTALATION WINDOWS 8 (New Update)

Instal Windows 8

Bagi yang masih belum tahu langkah2 menginstall windows 8, baik memakai CD/DVD ataupun memakai USB flahdisk, berikut langkah2 untuk menginstall edisi pratinjau pengembang windows 8 dari microsoft. Windows 8 edisi Pengembang adalah versi pra-beta dari microsoft untuk pengujian dan tujuan pengembangan. ini tidak dianjurkan di install pada pc yang masih aktif digunakan.

Jika ada rencana untuk membuat dual booting, pastikan anda menyediakan partisi primer lebih dari 20GB. dan jika ada rencana untuk instalasi bersih, pastikan backup dahulu file2nya kemudian baru diformat harddisk C nya, lalu install bersih windows 8 nya.

1. Boot komputer anda dengan media instalasi windows 8 Developer.
2. Mungkin butuh beberapa menit untuk memuat file-file, dan kemudian akan membawa Anda ke layar instalasi. Pilih pilihan yang sesuai dan klik Next.

3. Sekarang klik pada “Install Now” untuk melanjutkan

4. centang “Accept the terms and conditions” dan kemudian klik “Next”.

5. Disini kita bisa memilih opsi apakah ingin meng-upgrade windows kita ke windows 8 Edisi Developer atau ingin melakukan instalasi bersih. Pilih Custom (Advanced) untuk melanjutkan instalasi bersih.

6. Pada layar ini Anda dapat memilih drive yang ingin Anda instal, di sini kita memiliki kemampuan untuk mengelola disk, format, membuat partisi dll Jika Anda berencana untuk men-setup Dual boot maka Anda dapat memilih drive yang berbeda. Setelah Anda mengkonfigurasi drive klik “Next”

7. Itu saja sekarang akan dimulai proses instalasi, tunggu sampai selesai yang mengambil waktu 10 menit sampai 1 jam tergantung pada konfigurasi Hardware.

8. Setelah itu menyelesaikan instalasi Komputer Anda akan reboot dan akan mempersiapkan pengaturan2. Jadi silahkan menunggu beberapa saat.

9. Sekarang akan membawa Anda untuk mempersonalisasi pengaturan desktop Anda. Silahkan pilih “Express settings” yang pada layarnya tertera keterangan tentang apa saja settingan akan dilakukan.

10. Tidak seperti sistem operasi lain, pada Windows 8 Anda dapat login menggunakan account Windows Live. Jadi, Anda dapat memasukkan informasi account Windows Live Anda.

Jika tidak ingin menggunakan metode login ini, silahkan klik pada “I don’t want to log in with a Windows Live ID”.

Anda dapat memilih “Local account” untuk membuat Username dan Password untuk login ke Windows Anda.

Setelah semua informasi telah dimasukkan, klik “Next”.
11. Sekarang Windows akan mengkonfigurasi pengaturan Anda


Setelah semuanya di setup, maka kita akan disuguhkan tampilan Desktop Windows 8.

Selamat! Anda sekarang telah berhasil menginstal Windows 8 edisi Pengembang di komputer Anda.

Finally!

Finally! 90% TA gue akhirnya kelar, thanks god :)

setelah berjuang selama hampir 6 bulan lamanya, akhirnya tugas akhir gue rampung juga, yaa beginilah usaha kalo kita maksimal pasti dapat hasil yang maksimal juga akhirnya, memang Tuhan itu selalu ada bersama umatnya yang selalu berusaha keras buat mewujudkan impiannya :)

Optimasi Gambar untuk Web

Gambar merupakan pendukung untuk setiap elemen web, mulai dari ilustrasi artikel, gambar pendukung artikel bahkan gambar-gambar yang digunakan dalam desain webnya.

Ada berbagai macam tipe file gambar, seperti jpg, png, dan gif. semuanya memiliki karakteristik dan kualitas yang berbeda, lalu tipe file apa yang cocok digunakan untuk web? disini saya mencoba berbagi tips optimasi gambar untuk web, memilih tipe file yang tepat dan optimasi gambar agar ukurannya lebih kecil namun masih memiliki kualitas yang baik.

Memilih tipe file yang tepat

Seperti yang telah saya sebutkan ada berbagai macam tipe file gambar, diantaranya jpg, png dan gif. Berikut ini saya jelaskan kapan suatu tipe file harus digunakan :

JPEG

Ketika gambar yang ingin anda gunakan dalam web, misalnya dalam artikel atau bahkan elemen pendukung desain web memiliki bermacam-macam warna atau kompleksitas warna yang tinggi contoh sederhananya adalah gambar hasil "jepretan foto" gunakan tipe file JPEG.

Penggunaan tipe file JPEG pada gambar-gambar tersebut sangat mendukung karena file JPEG mampu meyimpan beragam informasi warna/menjaga kualitas gambar meskipun ukuran filenya kecil.

GIF

Ketika gambar memiliki warna sedikit, atau sebagian area didominasi oleh satu warna, maka tipe gambar gif lah yang cocok untuk digunakan. Contoh gambar yang bisa memiliki tipe gif ini adalah logo (logo sederhana), diagram dan lain-lain.

PNG

Tipe file PNG bisa digunakan ketika gambar yang akan anda gunakan memiliki transparansi. Meskipun tipe file GIF bisa memiliki transparansi namun tipe file PNG lebih cocok untuk masalah ini. tipe gif hanya bisa mentransparankan 100%, ketika ada gradasi warna yang memiliki transparansi, tipe file GIF akan memiliki kualitas yang rendah. berbeda dengan tipe PNG.

Contoh diatas adalah contoh transparansi pada shadow. bagian kiri adalah file PNG dan bagian kanan adalah file GIF (dengan transparansi). Transparansi PNG lebih halus (nilai transparans bisa berkisar antara 0 s.d 100%) sedangkan GIF memiliki area transparan 100% (tidak bisa memiliki transparansi misalnya 50%).

Optimasi Tipe File

Dengan menggunakan image editor seperti Photoshop, setiap tipe file gambar, masih bisa dioptimasi agar gambar memiliki ukuran rendah dan ramah akan bandwidth internet namun masih memiliki kualitas yang tinggi.

Optimasi menggunakan Photoshop

Dalam photoshop, setiap Anda ingin menyimpan gambar untuk kebutuhan web, pastikan pilih menu File>Save For Web and Devices.

Atur preset yang disediakan, misalnya ketika Anda ingin menyimpan gambar dengan tipe file JPEG, atur presetnya seperti berikut :

atau anda juga bisa mengatur "Quality"-nya sendiri, perhatikan juga ukuran yang dihasilkan dan kualitas gambarnya.

Untuk mendapatkan transparansi dalam file PNG, pastikan anda memiliki preset PNG-24, jika tidak maka gambar akan memiliki background putih.

Optimasi menggunakan Situs pihak ketiga

Ada beberapa situs yang melayani untuk optimasi gambar-gambar yang akan digunakan dalam web. misalnya smush.it dari yahoo. Kadang gambar yang telah anda optimasi melalui langkah sebelumnya masih bisa dioptimasi kembali oleh smush.it, sehingga file yang dihasilkan lebih kecil namun masih menjaga kualitasnya.

Pada contoh berikut, saya melakukan optimasi untuk file JPEG, dan hasilnya masih bisa dioptimasi sebesar 0.17% dan ukuran gambar berkurang sebesar 38bytes.

Optimasi Gambar melalui HTML

Optimasi melalui HTML berbeda dengan optimasi sebelumnya. Dalam HTML anda bisa membantu mengoptimalkan kecepatan loading gambar, dengan menentukan atribut width dan height pada gambar. Jika anda tidak menentukan kedua atribut tersebut maka ukuran gambar akan dikalkulasikan terlebih dahulu oleh browser/CPU sebelum ditampilkan dan ini cukup memakan waktu ketika gambar memiliki ukuran super :).

<img src="gambar.jpg" alt="Ilustrasi" width="200" height="300">

Jadi pastikan anda menentukan atribut width dan height ini sesuai dengan ukuran gambar.

Jangan meresize melalui atribut width dan height

Jangan sekali-kali meresize/merubah ukuran gambar dengan menentukan atribut width dan height, cara ini akan memperlambat proses loading web. Misalnya anda memiliki gambar dengan ukuran 600px*800px namun anda hanya membutuhkan gambar dengan ukuran 200px*300px dan anda melakukan resizing dengan atribut width dan height :

<img src="gambar.jpg" alt="Ilustrasi" width="200" height="300">

Solusinya adalah, buat file berbeda untuk ukuran yang berbeda, jangan merubah ukuran gambar dengan menggunakan atribut html. Jangan Pernah! :)

Kesimpulan

Penggunaan tipe gambar yang tepat dan cara pemuatan gambar yang tepat (dengan menyertakan atribut width dan height) dapat mempercepat loading web, selain itu gambar yang telah dioptimasi akan memiliki ukuran yang relatif kecil namun memiliki kualitas tinggi. Jika demikian, bukan Anda saja yang senang, pengunjung pun ikut senang karena loading webnya yang cepat :).

Referensi : "HTML and CSS: Design and Build Websites" oleh Jon Duckett

by Rian Ariona berlangganan via e-mail

 

Sang Designer dan Sang Pemikir yang Jenius

Sang Designer dan Sang Pemikir yang Jenius

Waktu terus berjalan, sang designer kita sekarang sudah menjadi profesional dengan pekerjaan nya. Karena dengan kepandaian nya mendesign sebuah web, sekarang dia menjadi tambah pusing lagi dengan order-order yang datang dari sana-sini. Tentu saja sekarang dia harus memikirkan suatu cara yang cepat dan akurat untuk menyelesaikan order-order yang diterima nya.

Anda sebagai sahabat sejatinya, menjadi senang sekaligus prihatin dengan kondisi ini. Sebab hampir setiap hari sang designer kita itu dikejar-kejar oleh pelanggan nya untuk segera menyelesaikan design web nya. Walah-walaaah..., ternyata menjadi profesional itu tidak enak juga yah keluhnya. Apa ada yah suatu program yang dapat mempermudah dalam pendesign-an web ini..?, tanya dia kepada Anda. lalu Anda pun menjawabnya, Pasti ada donk..!, sebab semua orang juga memikirkan bagaimana membuat sesuatu itu menjadi mudah dan cepat..!, kilah Anda dengan semangat.

"Albert Einstein"

Tapi Program apa yang bisa membuat design web ku ini menjadi lebih cepat dan mudah..?, tanya dia lagi. Waaaaah..., untuk saat ini saya tidak tahu tuh..!, tapi pasti ada deh. Uuummmmh..., bagaimana kalau kita tanyakan pada Bang Einstein untuk hal tersebut.?, jawab Anda. Tapi saya malu bertanya pada dia, keluh dia lagi.

"Untuk mendapatkan ilmu jangan malu untuk bertanya pada siapa saja.., walaupun Bang Einstein itu terlihat eksentrik, tetapi dia punya banyak akal dan segudang ilmu yang mungkin bisa menyelesaikan masalah kamu itu..!, jawab Anda dengan antusias. Kamu benar.., Kalau begitu yuk antar saya ke Bang Einstein..!, sambung dia. Maka Anda berdua pun pergi menuju tempat nya Bang Einstein untuk mencari penyelesaian masalah teman sejati Anda itu."

Sesampai nya di tempat Bang Einstein, Anda pun langsung mengungkapkan permasalahan yang dihadapi rekan Anda tersebut. Pada saat itu Bang Einstein berpikir serius tanpa bersuara untuk mencari solusi dari permasalahan tersebut. Tak lama kemudian Bang Einstein berkata. " Untuk memudahkan dalam merancang apapun, diperlukan sebuah template atau wadah yang dapat menampung maksud yang sama. Sehingga template tersebut dapat digunakan lagi dilain waktu tanpa harus membuat lagi maksud yang sama. "

Mendengar penuturan dari Bang Einstein itu Anda berdua masih terlihat bingung mengenai maksud dari solusi yang diberikan Bang Einstein tersebut. Melihat gelagat itu, Bang Einstein pun tersenyum kemudian dia berkata lagi. Saya mengerti bila Kalian berdua bingung apa yang saya ucapkan tadi, Ok lah sekarang saya beri contoh yang mudah mengenai pemikiran saya tersebut. Kalian lihat batu bata yang ada dipinggir rumah ku ini..!, seru dia sambil menunjukan jarinya ke arah samping. Anda berdua pun menoleh ketempat yang ditunjukan oleh Bang Einstein. Dapatkah kalian berdua membuat sebuah batu bata yang sama ukuran nya, tanpa menggunakan cetakan..?, tanya Bang Einstein pada Anda berdua. Dengan kompak Anda berdua menjawab "Tidak bisa..!". Lalu Bang Einstein berkata lagi. Sebenarnya bisa, tetapi tentu saja memerlukan waktu yang lebih lama ketimbang memakai cetakan. Nah.., Cetakan inilah yang membuat pekerjaan membuat batu bata ini jadi cepat. Tapi apa hubungan nya batu bata dengan design web..?, tanya Anda pada Bang Einstein. Bang Einstein tidak menjawab pertanyaan Anda, tetapi dia tersenyum. Kemudian dia berkata lagi. Saya dengar kalian berdua sedang mempelajari design web..!, Anda berdua pun mengangguk seperti burung pelatuk. Sekarang saya bertanya pada Kalian berdua.., bagaimana cara penulisan program HTML untuk membuat huruf berjenis ARIAL yang berukuran 12 dan berwarna merah..?, tanya Bang Einstein sambil mengambil secarik kertas dan sebuah pena, kemudian diserahkan kepada teman Anda yang dari tadi terlihat bengong. Kemudian teman Anda tersebut menuliskan nya pada kertas yang diberikan Bang Einstein. Tulisan nya sebagai berikut :

                                           <font face="arial" size="2" color="red">

Lalu Bang Einstein bertanya lagi pada Anda berdua. Berapa banyak perintah ini Kamu tulis dalam suatu design web..?. Lalu teman Anda itu menjawab, Yah.., banyak dan hampir setiap saat saya menuliskan nya. Bisakah Kamu ringkas perintah itu dengan suatu template..? , tanya Bang Einstein lagi. Teman Anda tersebut cuma menggelengkan kepalanya seperti orang membaca tahlilan dalam ISTIGHOSAH. Bang Einstein tersenyum melihat kelakuan teman Anda tersebut, kemudian dia berkata lagi. Pernahkah kalian mendengar suatu script yang disebut dengan Cascading Style Sheet..?, Anda berdua pun menjawab, "Pernah..!". Sekarang gunakan CSS sebagai template untuk memudahkan Kalian dalam men-design sebuah web, seru Bang Einstein. Lalu Anda berdua pun saling berpandangan dan tertawa gembira atas penuturan Bang Einstein tersebut. Inilah rupanya maksud dari penuturan Bang Einstein semula. Bahwa untuk memudahkan suatu design, maka diperlukan sebuah template, dan dalam design web dengan HTML, CSS itulah salah satu template nya. Setelah paham mengenai penuturan Bang Einstein tersebut, Anda berdua pun pamit dan mengucapkan banyak terima kasih atas pemikiran nya tersebut.

Desain Website Atau Blog Yang Baik

Sebuah website/blog dapat dinilai memiliki desain yang baik apabila memenuhi kriteria penilaian tertentu yang mungkin saja berbeda tergantung dari sudut pandang penilai. Meskipun demikian, secara umum terdapat lima kriteria desain website yang baik yang bisa digunakan sebagai acuan bagi Anda untuk membuat desain website/blog Anda sendiri atau hanya sekedar memperbaiki desain website yang sedang Anda gunakan.

Pengunjung baru sebagai target utama

Tujuan yang digunakan sebagai dasar acuan kriteria-kriteria berikut adalah pengunjung baru dimana tentunya kesan pertama memiliki nilai tersendiri di mata mereka. Biasanya, pada kunjungan kedua dan seterusnya, penilaian akan beralih pada hal lainnya seperti konten website/blog yang bersangkutan. Pentingnya menunjukkan kesan pertama yang menggoda dalam sebuah desain website bisa dianalogikan dengan ketika Anda mencoba menunjukkan kesan pada lawan jenis bahwa Anda adalah sosok yang menawan.

Kriteria Desain Website/blog yang baik

1. Waktu loading yang cepat
   Dari sudut pandang manapun, waktu loading yang cepat harus menjadi perhatian utama. Apabila wesite Anda gagal ditampilkan dengan sempurna dalam waktu beberapa detik, biasanya pengunjung baru enggan berlama-lama menunggu dan memutuskan untuk meninggalkan website/blog Anda. Biasanya ini terjadi pada pengunjung yang berasal dari hasil pencarian dimana mereka membutuhkan informasi yang tepat dan singkat.
2. Tidak memiliki halaman antara
   Halaman antara adalah halaman yang ditampilkan sebelum halaman utama ditampilkan yang biasanya disebut dengan Splash Page atau Intermission. Halaman seperti ini biasanya berisi ucapan selamat datang atau bahkan iklan. Halaman seperti ini sering ditemukan, seringkali hanya berisi logo website/blog dengan tulisan “Click here to Enter Site” di bawahnya. Hal ini sungguh mengganggu bagi pengunjung website Anda.
3. Tidak memuat file multimedia yang terlalu banyak
   Video dan audio adalah konten multimedia yang cukup mengganggu pengunjung dan memang tidak efektif. Biasanya pengunjung akan langsung mengecilkan volume atau bahkan menutup website/blog Anda. Apabila file multimedia memang diperlukan, buat agar file tersebut tidak langsung dijalankan pada saat website dibuka dan tambahkan link untuk mengaktifkan file multimedia tersebut.
   Bentuk lain yang cukup mengganggu adalah gambar animasi, sebisa mungkin tempatkan gambar animasi di luar konten utama website Anda sehingga pengunjung tidak terganggu ketika berusaha membaca konten tersebut.
4. Memberikan pesan, kesan dan tautan yang jelas
   Pengunjung akan segera meninggalkan website/blog Anda jika mereka tidak mendapatkan kejelasan tentang apa yang ditawarkan pada website Anda. Berikanlah informasi yang cukup pada halaman website Anda mengenai isi website tersebut seperti judul yang cukup jelas dibaca dan menginformasikan isi halaman website Anda. Berikan tautan (link) yang menuju halaman-halaman lain pada website Anda.
   Tempatkan tautan ini pada tempat yang mudah dijangkau dan jelas terlihat. Hindari pemuatan tautan yang menuju halaman website yang masih dalam pengembangan. Sebagai alternatif, berikan pesan yang menyebutkan bahwa halaman tersebut akan dapat diakses pada jangka waktu tertentu.
5.  Memiliki desain dengan struktur yang tepat
   Tentukan struktur penempatan konten website seperti header, footer, menu navigasi dan blok iklan. Usahakan struktur tersebut sama pada setiap halaman sehingga pengunjung tidak dibuat bingung dengan misalnya, menu yang berpindah-pindah.

Usahakan agar pemilihan warna, penempatan logo website dan font yang digunakan konsisten pada setiap halaman sehingga pengunjung tidak merasa berpindah ke website lainnya. Jangan pernah menempatkan iklan yang lebih banyak daripada konten Anda karena pengunjung tidak mencari iklan melainkan konten website Anda.
Dengan mengikuti kriteria tersebut, peluang Anda dalam memberikan kepuasan kepada pengunjung akan lebih tersedia. Dapat disimpulkan bahwa desain website yang baik dilihat dari sudut pandang target pengunjung bukanlah sebuah website dengan tampilan mewah nan indah, melainkan sebuah desain terstruktur dan informatif serta memberikan kemudahan pada setiap pengunjung untuk mengeksplorasi website Anda.
Meskipun demikian, sebuah desain website yang baik belum tentu bisa membuat penunjung tetap mengunjungi website Anda. Banyak hal lain yang harus juga dipenuhi seperti konten yang selalu ter-update serta akurasi sebuah artikel yang ditawarkan.

Semoga bermanfaat.

10 Webdesign Inspiration : Ilustrasi Grafis

Kali ini saya akan menunjukkan beberapa showcase webdesign yang bisa jadi beberapa inspirasi untuk memulai pekerjaan kita. Setelah dua showcase sebelumnya, mari kita lihat beberapa inspirasi webdesain dengan tema khusus: grafis dan ilustrasi (berikutnya @belajar_web akan selalu menampilkan showcase dengan topik khusus).
Oke, langsung saya mari kita nikmati beberapa webdesign menarik berikut:

1. Francesco Mugnai

Sebuah portfolio design dengan ilustrasi potret sang pemilik website, dengan tambahan navigasi keyboard

2. Creative Hut

Header dengan ilustrasi dan tipografi yang simple dan eyecatching

3. Kadhaa

Ilustrasi menarik dengan navigasi yang atraktif. two thumb!

4. Gopal-Semma

Website pernikahan yang simple dan ilustratif. Anda juga ingin buat seperti ini untuk pernikahan Anda?

5. Kommigraphics

Time to slideshow!

6. 2 Create Studio

Grafis hand drawn yang indah dengan implementasi parallax yang dinamis

7. AIGA Nebraska The Show 20

Full ilustrasi. Dinamis. Keren!

8. Dear Lament

Siluet kepala gadis cantik ini akan menarik kita untuk mengeksplore website ini hingga ke kedalaman 4705px. It’s sexy silhouette!

9. Me and Oli

Tertarik dengan garmen unik? Check this out!

10. Zizzi Ristorante

Website restoran dengan tampilan yang ilustratif dan dinamis
Ingin membuat website ilustratif juga? Semoga terinspirasi.

Sumber :  http://belajarwebdesign.com

Menyatukan 2 Pikiran (Designer vs Programmer)

Designer adalah designer, designer bukan programmer. Ada hal-hal yang susah dipersatukan antara designer dan programmer. Hal itu adalah idealisme. Designer: membuat website sebaik mungkin menurut pada sudut pandang mereka. Programmer: menerjemahkan hasil design si designer menjadi satu program utuh.

Tidak semua programmer bisa men-design dan sebaliknya sebagian besar designer tidak bisa memrogram. Disaat terjadi masalah, keduanya mempertahankan pendapat masing-masing.

Designer: banyak membuat ornamen-ornamen yang terkadang tidak jelas gunanya apa, walaupun enak dipandang.
 

Programmer: meskipun bisa dibikin, tapi keseringan mereka malas untuk membuatnya satu-persatu.

Designer: bertahan dengan argumennya bahwa dengan banyak ornamen maka website lebih menarik (memang iya).
 

Programmer: menolak pendapat designer karena semakin banyak ornamen makan akan semakin berat loading website-nya.

Designer: terlalu murah untuk memberikan semua layout per page, meskipun bagus dan bisa menjadi variasi.
 

Programmer: ingin menggunakan layout general, jadi tidak perlu banyak-banyak membuat template.

Designer: membuat design yang menurut mereka bagus tanpa memperdulikan feedback-nya pada website itu.
 

Programmer: membuat program yang bisa mendapat feedback yang bagus.

Designer: tidak terlalu tahu bagaimana hasil design mereka nantinya akan seperti apa implementasinya.
 

Programmer: mengerti benar bagaimana implementasi website yang bagus.

Dari kasus-kasus diatas, maka seharusnya designer dan programmer harus sering-sering berkomunikasi. Sering terjadi adalah client akan berekspektasi bahwa website yang mereka dapat akan seperti hasil design. Jika hasil design sudah melalui tahap seleksi mungkin tidak akan menjadi masalah. Namun, jika yang terjadi tanpa ada pemeriksaan terlebih dahulu dan ada sesuatu yang tidak mungkin untuk dilakukan, itulah masalahnya.

Solusi yang tepat untuk masalah-masalah seperti ini adalah membuat sebuah aturan bagi para designer, apa yang boleh dan apa yang tidak. karena lagi-lagi, yang membuat design bisa diterapkan dengan baik di website adalah programmer.

Sumber :  http://belajarwebdesign.com

Typography Untuk Website

Terdengar simpel dan sangat mendasar, tetapi inilah yang sering saya keluhkan. Isu-isu legalitas dan kompatibel atau tidaknya sebuah font untuk ditampilkan dalam sebuah website sangat-sangat membuat saya stres tingkat tinggi. Mungkin terasa hiperbola dari kalimat saya yang terakhir, ya, tapi itulah kenyataannya. Kata kompatibel yang saya maksud adalah tampil sempurnanya sebuah font terhadap semua media (browser, OS, mobile).

Sejarah Singkat

Sedikit cerita tentang Web Typography. Awalnya setiap browser memiliki standar format font masing-masing dari “TrueDoc”, “EOT”, “OTF/TTF”, akhirnya muncul “Web Open Font Format” atau biasa disingkat “WOFF”. Dalam perjalanannya, Web typography banyak mengalami kendala, terutama masalah “Lisensi”. Dengan menyertakan/embed @font-face maka dengan mudah orang akan mendapatkan font tersebut. Hal ini dikarenakan akses menuju font yang dimaksud berupa tautan, dan setiap orang bisa mengakses font tersebut.

Bertolak belakang dengan cara yang mudah tadi, artis typography merasa kuatir dengan cara tersebut. Ini berarti orang akan dengan mudah mendapatkan font mereka secara gratis. Tak perlu saya jelaskan panjang lebar, tentunya kita tahu, mereka juga cari makan. So, we must respect them too. Kita juga harus menyiapkan biaya ekstra untuk lisensi font mereka (untuk yang berbayar). Jika kita ingin dihargai oleh mereka kita juga harus menghargai mereka. Toh sama-sama menguntungkan.

Mungkin saya cukupkan untuk latar belakang dari Web Typography ini, jika ingin membaca lebih lanjut silahkan baca tautan dari referensi yang saya sertakan.

Generic Fonts

Ada 5 generic fonts yang digunakan dalam web. Font tersebut adalah: Sans-Serif, Serif, Monospace, Cursive, dan Fantasy. Kita tidak perlu menambahkan font ekstra untuk kelima font tersebut, karena secara default browser bisa merender font-font tersebut.

Hasil Render MacOS

Hasil Render Linux

Hasil Render Windows

Hasil Render iPhone

Hasil Render iPad

Hasil Render Mozilla Mobile

Hasil Render Android Mobile

Hasil Render Android Tab

Gambar diatas adalah hasil render font dari pelbagai media. Setiap media memiliki generic font masing-masing. Kita para developer dituntut untuk membuat font tersebut tampil identik di setiap media.

Dasar Styling Font

Pada dasarnya, untuk menampilkan sebuah font type untuk sebuah desain situs cukup melampirkan jenis font tersebut ke sebuah elemen HTML. Berikut adalah cara dasarnya

p { font-family: sans-serif;}
.header { font-family: serif;}

Tentu saja jika hanya menyertakan salah satu diantara 5 font dasar, maka sebuah situs akan terlihat monoton. Maka untuk mempercantik desain situs perlu menambahkan font diluar font dasar. Namun, perlu diperhatikan juga kompatibilitas font tersebut, apakah dapat tampil di semua browser dengan identik atau tidak. Jika tidak, harus ada font alternatif yang serupa tapi tak sama untuk tampil identik di semua browser dan segala jenis OS dan media. Berikut contoh dasar menyertakan font yang kita targetkan beserta alternatif fontnya.

p { font-family: helvetica, arial, verdana, sans-serif;}
.header { font-family: “times new roman”, times, georgia, serif;}

Kode css diatas dapat dibaca sebagai berikut

“Tampilkan elemen p menggunakan font helvetica, jika tidak ada gunakan font arial, jika tidak ada gunakan font verdana, jika tidak ada gunakan sans-serif”

“Tampilkan elemen .header menggunakan font times new roman, jika tidak ada gunakan font times, jika tidak ada gunakan font georgia, jika tidak ada gunakan font serif”

Kode diatas hanyalah contoh. Untuk pemula, saya sarankan untuk memperhatikan bentuk font yang akan disertakan berada dalam kelompok mana. Untuk referensi, saya sertakan tabel bentuk font menurut kelompoknya.

Untuk kompatibilitas font berdasarkan dari OS, saya sertakan tabel dibawah.

Tabel-tabel diatas berisi tentang generic font yang didukung oleh OS. Perhatikan dengan seksama font-family yang cocok dengan font yang sesuai dengan desain. Mungkin untuk pengelompokan font, ikuti tabel-tabel sebelumnya.

Embed Font Eksternal

Jika generic font dirasa kurang untuk mempercantik desain situs. Maka kita perlu embed font eksternal. Dalam melakukan embed ini, perhatikan juga tentang “bagaimana format font yang dapat tampil identik disemua browser”. Dengan tetap menyertakan font-family agar jika format font tidak dapat diterima oleh browser, ada alternatif font lain yang dapat ditampilkan (setidaknya bentuk font tidak lari terlalu jauh).

Dasar embed font sangatlah mudah, seperti membuat tautan dalam HTML.

@font-face { font-family: font-sans-serif; src: url(fonts/sans-serif-custom.ttf); font-size: normal; font-weight: normal;}
p { font-family: fontsans-serif, arial, helvetica, sans-serif; }

Dalam melakukan embed font, yang terpenting adalah dimana letak font tersebut, sisanya menyesuaikan. Font family yang terdapat di @font-face adalah alias nama font yang akan kita embed.

Cara paling aman untuk embed font adalah menggunakan pihak ketiga. Sejak saya menjadi front-end web dev, saya hanya tahu 2 situs yang menyediakan layanan ini, mungkin teman-teman ada yang mau menambahkan, saya persilahkan.

www.fontsquirrel.com

www.google.com/webfonts

Berikut saya sertakan hasil render dari masing-masing browser di 3 OS berbeda.

Linux

Windows

MacOS

Mobile

Font yang saya gunakan adalah “Droid” untuk Squirrel font dan “Share” untuk Google font. Khusus untuk Google font, saya bereksperimen untuk menggunakan langsung pada server Google dan font yang saya unduh sendiri dalam format woff.

Untuk Squirrel font dengan tulisan “Font Mix”. Font family ini menggunakan kode sebagai berikut.

@font-face {
font-family: 'DroidSerifRegular';
src: url('droid/DroidSerif-Regular-webfont.eot');
src: url('droid/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('droid/DroidSerif-Regular-webfont.woff') format('woff'),
url('droid/DroidSerif-Regular-webfont.ttf') format('truetype'),
url('droid/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Mungkin cukup sekian artikel tentang webfont kali ini. Semoga bermanfaat

Referensi:

http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
http://www.upsdell.com/BrowserNews/res_fonts.htm
http://www.w3schools.com/cssref/css_websafe_fonts.asp
http://en.wikipedia.org/wiki/Web_typography