Berkas PSD Desain Nokia X

nokia-x-wireframe

berkas PSD saya buka melalui GIMP

 

Bisa dibilang sedang marak berita mengenai Nokia X, produk terbaru dari nokia yang berbasis Android AOSP. Kemarin saya sempat mencari berkas desain untuk menampilkan tangkapan layar aplikasi yang saya buat pada perangkat Nokia X. Secara kebetulan saya menemukan satu Desain Kit Nokia X dalam bentuk berkas PSD pada website deviantart. Pada berkas yang dilampirkan di website pembuatnya, tersedia tiga warna yaitu hijau, merah dan kuning. Jika tertarik, anda bisa mengunduhnya dengan mengklik gambar di bawah ini.

pratampil dari website pembuat di deviantart

Palet Warna untuk Nokia X Tiles

nokia-x-tiles-palette

Setelah update firmware untuk Nokia X (versi 11.1.1) ada beberapa pembaruan, salah satunya ada fasilitas untuk mengubah warna latar ikon dari aplikasi yang terpasang. Sebelumnya setiap aplikasi yang terpasang di Nokia X memiliki warna latar biru tua (#124191) dan tidak dapat di ubah. Bagi teman-teman yang ingin membuat ikon aplikasi untuk Nokia X bisa mengunduh palet warna yang saya buat. Agar warna latar ikon yang dibuat mendukung warna latar dari Nokia X Tiles. Palet warna tersedia dalam ekstensi .svg dan .gpl (dapat digunakan untuk gimp dan inkscape). bisa diunduh

di Sini

Mengubah Ikon Aplikasi dari Proyek Android

Artikel kali ini mengambil kasus ketika kita terlanjur menggunakan ikon sementara pada saat memulai proyek Android dan ingin menggantinya saat proyek sedang berlangsung atau ketika telah selesai. Sebenarnya cara ini bisa dilakukan secara manual. Namun, tetap saja merepotkan dikarenakan kita harus mengubah ikon sebanyak 4 kali pada folder drawable yang tersedia (mdpi, hdpi, xhdpi,xxhdpi). Berikut ini cara mengubah ikon aplikasi menggunakan Android Icon Generator:

1. Klik kanan proyek yang diinginkan pada Package Exploler atau Project Exploler, kemudian pilih menu New > Other. Pada kotak dialog New pilih Android > Android Icon Set.

android-icon-set

2. Pada kotak dialog Create Asset Set pilih Launcer Icon. pastikan nama proyek dan nama berkas ikon yang akan diubah sudah benar. Kemudian tekan Next.

launcher-icon-set

3. Lakukan perubahan seperti pada saat pertama kali anda membuat proyek Android. Setelah selesai tekan Finish.

 alt=

Androidviews.net – Kumpulan Custom Android UI

AndroidViews - Custom Android UI Views

Bagi anda yang terbiasa mengembangkan aplikasi Android, tentu saja tampilan antar muka juga merupakan hal yang perlu diperhatikan. Salah satu kesulitan dalam mengembangkan antarmuka aplikasi Android adalah dukungan komponen User Interface (UI) yang bisa dipakai berbeda berdasarkan versi API android yang dipakai. Jika kita sudah mengetahui tentang AndroidBarSherlock yang bisa menampilkan UI Android versi 4.0 pada aplikasi yang kita buat meski menggunakan API 8 pada saat pengembangan. Sedangkan AndroidViews.net adalah website yang berisi kumpulan Custom Android UI yang bisa kita gunakan pada aplikasi Android yang sedang kita kembangkan. Beberapa Custom UI yang telah saya coba mendukung minimal API mulai versi 8 dan disediakan berkas library serta sample, lalu  lisensi yang dipakai adalah MIT atau Apache. Selamat mencoba!

 

Mencoba Firefox OS Simulator

Mungkin banyak yang telah tahu tentang Firefox OS. Sistem operasi untuk perangkat bergerak sebagai alternatif sistem operasi yang sudah ada seperti Android, IOS, Windows Phone, dll. Artikel kali ini kita akan mencoba untuk memasang Firefox OS Simulator. Firefox OS Simulator adalah plugins untuk browser Firefox sehingga kita bisa mencoba pengalaman menggunakan Firefox OS, meski tidak sepenuhnya mirip, kita masih bisa membuat dan mencoba Firefox OS dan aplikasinya. Berikut ini adalah langkah-langkah untuk mencoba firefox OS di komputer:

1. Unduh browser Firefox pada alamat getfirefox.com lalu pasang pada komputer.

jika anda menggnakan Linux silahkan mengikuti panduan dibawah ini
pada saat tulisan ini dibuat, versi terakhir firefox adalah 2.7. langkah-langkah pemasangan sebagai berikut:
1. buka terminal.
2. unduh berkas Firefox dengan mengetikkan perintah di bawah ini lalu tekan enter.
32bit

wget ftp://ftp.mozilla.org/pub/mozilla.org/firefox/releases/27.0/linux-i686/en-US/firefox-27.0.tar.bz2

64bit

wget ftp://ftp.mozilla.org/pub/mozilla.org/firefox/releases/27.0/linux-x86_64/en-US/firefox-27.0.tar.bz2

3. ekstrak berkas yang telah berhasil diunduh

tar -xjvf firefox-27.0.tar.bz2

4. hapus berkas /opt/firefox jika ada

sudo rm -r /opt/firefox*

5 . salin berkas firefox kedalam direktori /opt/firefox27

sudo mv firefox /opt/firefox27

6. buat link menuju direktori /usr/bin agar firefox lebih mudah dijalankan

sudo ln -s /opt/firefox27/firefox /usr/bin/firefox

7. Jalankan firefox dengan mengetikkan peritah ‘firefox’ pada terminal

2. Buka browser Firefox dan ketikkan alamat https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/, lalu pilih tombol Install Firefox OS 1.2 Simulator (stable) untuk memulai mengunduh plugins. Anda juga boleh mecoba versi 1.3 yang belum stabil. jika ada dialog peringatan pilih Install Now.

Firefox OS App Manager Add-ons 2014-03-28 19-37-58 2014-03-28 19-38-00 Screenshot 2014-03-28 19-56-50 2014-03-28 19-56-52

3. Jika sudah selesai buka menu tools > App Manager atau ketikkan pada url bar about:app-manager. Kemudian tekan Firefox OS 1.2 untuk menjalankan simulator.

App Manager 2014-03-28 19-57-46 2014-03-28 19-57-48

4. Di bawah ini adalah tangkapan layar untuk App Manager dan Firefox OS yang berhasil dijalankan.

App Manager 2014-03-28 20-01-42 2014-03-28 20-01-44

Firefox OS Simulator 2014-03-28 20-00-35 2014-03-28 20-00-37 Firefox OS Simulator 2014-03-28 20-00-21 2014-03-28 20-00-23

sumber:
Firefox OS Simulator
Using the App Manager
Install Firefox 27 in Linux Mint 16

Catat Statistik Zikir dengan Zikr Counter

Pada saat ini, ponsel tidak lepas dari kehidupan kita sehari-hari. Perangkat ini sering berada di dekat kita. Dengan adanya sistem operasi ponsel yang beragam dan didukung dengan spesifikasi perangkat yang semakin tinggi memungkinkan memasang bermacam aplikasi yang bermanfaat pada ponsel kita.

Zikir Counter adalah aplikasi ponsel pada sistem operasi Android yang memiliki fungsi untuk membantu kita mencatat statistik zikir. Kita bisa menambahkan zikir-zikir yang sering kita lakukan dan menyimpannya pada ponsel. Selain itu ada modul zikir bebas yang mencatat zikir kita pada interval tertentu. Cara penggunaanya sangat mudah, setelah anda menambahkan nama zikir yang biasa anda lakukan. anda bisa menekan layar dan melepaskannya untuk menambah jumlah hitungan.

beberapa fitur dari Zikr Counter:

  • menyimpan lebih dari satu zikir
  • Mengaktifkan dan menonaktifkan suara dan getar
  • menyimpan statistik zikir
  • zikir bebas dengan interval yang telah ditentukan

Tangkapan layar:

zikr1 zikr2 zikr3 zikr4 zikr5

Ingin mencoba aplikasi ini?

Get it on Google Play

Mencetak area tertentu pada web dengan JQuery.PrintArea

Pada tutorial kali ini kita akan memanfaatkan plugin Jquery.PrintArea untuk mencetak area tertentu pada aplikasi yang telah kita buat. Berikut ini langkah-langkahnya.

Langkah 1: Mempersiapkan Kebutuhan

  1. Buat folder printarea pada folder root webserver
  2. Unduh JQuery di sini
  3. Unduh JQuery.PrintArea di sini
  4. Unduh bootstrap.min.css di sini
  5. Simpan semua berkas yang sudah di unduh dalam folder printarea

Langkah 2: Membuat berkas yang dibutuhkan

index.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>JQuery Print Area</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link href="bootstrap.min.css" rel="stylesheet" media="screen">
	
	<!-- css yang digunakan ketika dalam mode screen -->
	<link href="style.css" rel="stylesheet" media="screen">
	
	<!-- ss yang digunakan tampilkan ketika dalam mode print -->
	<link href="print.css" rel="stylesheet" media="print">
	
	<script src="jquery-1.8.3.min.js"></script>
	<script src="jquery.PrintArea.js"></script>
	<script>
		(function($) {
			// fungsi dijalankan setelah seluruh dokumen ditampilkan
			$(document).ready(function(e) {
				
				// aksi ketika tombol cetak ditekan
				$("#cetak").bind("click", function(event) {
					// cetak data pada area <div id="#data-mahasiswa"></div>
					$('#data-mahasiswa').printArea();
				});
			});
		}) (jQuery);
	</script>
</head>

<body>

<div class="navbar navbar-static-top">
	<div class="navbar-inner">
		<div class="container">
			<a class="brand" href="http://umsida.ac.id">Univ. Muhammadiyah Sidoarjo</a>
		</div>
	</div>
</div>

<div class="container">
	<div class="row">

		<h3>
			Daftar Mahasiswa
			<button id="cetak" class="btn pull-right">Cetak</button>
		</h3>
		
		<div id="data-mahasiswa">
		
		<!-- tampilkan ketika dalam mode print -->
		<div class="title">
			<center>
				DAFTAR MAHASISWA<br/>
				FAKULTAS TEKNIK<br/>
				UNIVERSITAS MUHAMMADIYAH SIDOARJO
			</center>
		</div>
		
		<table class="table table-condensed table-bordered table-hover" cellpadding="0" cellspacing="0">
			<thead>
			<tr>
				<th width="2%">#</th>
				<th width="12%">NIM</th>
				<th width="20%">Nama</th>
				<th>Alamat</th>
				<th width="12%">Kelas</th>
				<th width="12%">Status</th>
				<th width="9%" class="action"></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1. </td>
				<td>08.10802.00234</td>
				<td>Ari Effendi</td>
				<td>Gedangan</td>
				<td>E Sore</td>
				<td>Aktif</td>
				<!-- sembunyikan ketika dalam mode print -->
				<td class="action">
					<a href="#" class="btn btn-mini">Ubah</a>
					<a href="#" class="btn btn-mini">Hapus</a>
				</td>
			</tr>
		</tbody>
		</table>		
		
		</div>
	</div>
</div>

</body>
</html>

style.css


/* sembunyikan judul */
.title {
	display: none;
}

print.css


/* menyembunyikan tombol aksi */
.action {
	display: none;
}

/* memberikan border pada tabel */
.table { border-right: 1px solid black; border-bottom: 1px solid black; }
.table th, .table td { border-left: 1px solid black; border-top: 1px solid black; padding: 3px; font-size: 12px}

Langkah 3: Menguji Aplikasi

Buka browser kemudian ketikkan pada addressbar localhost/printarea/, tekan tombol cetak. Jika berhasil akan tampil kotak print dialog.

print-area-1

print-area-2

Unduh Kode