,

Menyulap TV konvensional menjadi Smart TV dengan Raspberry 2 atau 3

Profio Indonesia (21/1) – Halo kawan, sambil ngasuh anak ceritanya iseng buat perangkat multimedia di rumah, Latar belakangnya sih karena punya raspberry nganggur dan pengen bisa nyimak kajian yang Alhamdulillah sekarang sudah banyak di Youtube. Rencana arsitektur dan hasil akhirnya akan seperti ini:

yatse kodi remote network

Langsung Aja, kita siapkan alat dan bahan nya sebagai berikut:

Alat dan Bahan :

  • Raspberry Pi 2 / 3 lengkap dengan mini sdcard
  • Kabel HDMI
  • Card Reader (untuk memformat mini SD)
  • Seperangkat Komputer / Laptop
  • Software Win32 Disk Imager (Download di Link) lalu install ke komputer
  • Software SD Formater (Download di Link) lalu install ke komputer
  • OS Image Kodi OSMC for Raspberry (Download di Link)
  • Koneksi Jaringan Lokal dan Internet
  • Monitor LCD atau TV dengan port HDMI, atau TV Tabung dengan tambahan Perangkat Converter HDMI to AV
  • (Optional)Hardisk eksternal berisi file multimedia.
  1. Memformat Mini Sd Card 
    1. Masukkan Mini SD Card anda ke dalam Card Reader
    2. Pastikan Drive letter sdcard anda
    3. Jalankan Program SD Card Formatter, dan sekali lagi pastikan drive letter dari Sd card anda.
    4. Langsung saja klik Format. lalu tunggu proses formating selesai.
    5. Lalu tutup program SDCARD Formatter.
      1. sdcardformatter
  2. Inject Iso OSMC 
    1. Masukkan SD Card ke dalam SD Card Reader. Anda juga bisa menggukaan slot sd card yang biasa terdapat di laptop dengan memakai SD Adapter.
    2. Selanjutnya periksa Drive Letter pada windows explorer dan pastikan anda tidak salah destinasi. semisal sdcard anda di deteksi sebagai drive E:
    3. Jalankan program Win32DiskImager dari menu desktop ataupun start menu.
    4. Pilih file image OSMC yang telah anda download tadi.
    5. Lalu di pilhan Drive Letter SDCARD, masukkan drive letter yang terdeteksi. Sebagai contoh tadi adalah drive E:. Harap Hati-hati dalam memilih Drive . jika anda memilih drive letter yang salah, maka bisa jadi file di drive yang anda pilih itu nanti akan terhapus.
    6. selanjutnya klik write, dan tunggu sampai proses write complete
    7. Setelah selesai, Exit program dan keluarkan sdcard anda.
  3. Install Perangkat
    1. Masukkan mini SDCard anda pada Raspberry
    2. Hubungkan kabel HDMI antara Raspberry ke Monitor.
    3. Hubungkan Kabel LAN (Jika memakai Raspberry 2)
    4. Pasang kabel daya 5V ke raspberry dan hidupkan Monitor LCD
    5. Tunggu sampai Raspberry sukses boot from sdcard
    6. Hubungkan mouse ke Raspberry anda,-> cuma buat nekan tombol next aja.. hehe
    7. dan setelah selesai Proses installasi OS, perangkat akan restart otomatis dan..
    8. Selamat Smart TV anda telah siap.
    9. Ohya, hebatnya lagi Smart TV Kodi ini dapat di kontrol menggunakna Program Yatse di Android anda. jadi Smartphone anda bisa jadi remote smarttv anda.
    10. Remote perangkat smart tv ini dapat bekerja dengan syarat raspberry anda dan remote (smartphone ) anda berada dalam satu jaringan lokal yang sama.
    11. Scan perangkat pada aplikasi yatse anda maka akan terdeteksi os osmc yang anda install tadi.
    12. Selamat Mencoba dan menikmati smart tv anda..

Read more

Profio Indonesia
PT. Profio Teknova Indonesia merupakan sebuah perusahaan yang bergerak dalam bidang software development. Kami siap membantu mengembangkan bisnis Anda.
,

4 Alasan Yang Bikin Pengunjung Betah di Halaman Web Kamu dengan Icon yang Bagus

Antarmuka (interface) adalah segalanya mengenai komunikasi dalam menyelesaikan sesuatu. Sebuah UI dalam website adalah alat untuk mencapai tujuan; dan pekerjaan seorang designer adalah untuk membuat antarmuka yang membantu pengguna untuk mencapai tujuan tersebut dengan cepat.

Icon memang sempurna jika digunakan untuk antarmuka karena mereka dapat menyampaikan makna tanpa kata.

Dalam tulisan ini terdapat beberapa cara dalam menggunakan icon untuk meningkatkan kualitas UX pada sebuah website.

Meningkatkan Navigasi

Icon secara alami membantu pengguna untuk menavigasi ke dalam website hanya berdasarkan visual saja. Icon terbaik adalah yang paling mudah dikenal orang lain.

Tetapi kamu dapat mendesain icon untuk link dengan label berupa teks untuk penggunaan yang lebih jelas.

Mari coba kita lihat situs portofolio dari Tim Roussilhe yang menggunakan menu navigasi vertikal.

 

 

 

 
Tim menambahkan icon-icon di atas setiap label link untuk membedakan antara tujuan dan perlakuan. Ini adalah salah satu metode penggunaan icon yang terbaik dalam hal kejelasan karena mudah dilihat dan mudah dipahami.

Maka, ingatlah agar selalu menggunakan label teks pada link juga. Penggunaan icon saja (tanpa ada label) dalam navigasi website jarang berfungsi dengan baik atau setidaknya itu bukan yang terbaik dalam hal kemudahan pengunaan.

Akan tetapi dengan situs seperti My Own Bike, kamu setidaknya dapat menduga kemana link akan pergi. Situs ini sepenuhnya berbahasa Jerman, tapi masih memberikan petunjuk dengan icon-icon yang ada.

 

 

 

 

 

 

 

 

 

 

 

 

Icon penting lainnya adalah icon menu three-bar. Icon ini juga bisa disebut hamburger menu. Sementara banyak designer membencinya, semakin banyak orang yang lambat menyadari arti dari simbol ini.

Sebuah menu pada Inc adalah contoh yang bagus dalam menampilkan bagaimana icon mengikat kepada navigasi.

Tren populer lainnya adalah mega navigation dropdown menu. Menu ini dapat ditemukan di situs seperti Mashable dimana di setiap linknya terdapat arah panah kecil ke bawah yang mengindikasikan bahwa itu adalah sebuah menu dropdown.

 

 

 

 

 

 

 

 

Sebenarnya icon ini tidak terlalu dibutuhkan, namun itu justru dapat meningkatkan user experience. Sebagian besar pengguna mengenali simbol panah tersebut dan mereka juga tau apa artinya.

Tentu saja navigasi ini dapat berfungsi tanpa menggunakan simbol panah, namun tidak bisa dipungkiri bahwa icon dapat membantu memperjelas tujuan dan membuat browsing situs menjadi lebih sederhana.

Visual untuk Mendukung  Tingkah Laku

Navigasi dapat melangkah jauh, tidak hanya berkutat tentang menu atas saja. Navigasi juga termasuk pada link yang ada pada halaman utama atau pada sidebar yang membantu pengguna dalam menavigasi sebuah website.

Icon juga bagus digunakan pada link di halaman utama atau body jika menonjol. Sebagai contoh pada halaman utama Media Temple kamu akan menemukan beberapa tabel dengan link “read more” dengan warna yang berbeda.

 

 

 

 

 

 

 

 

Semua icon link ini menggunakan arah panah ke samping kanan. Pada website, hal ini pada umumnya dikenali sebagai simbol untuk berpindah ke halaman selanjutnya.

Kebanyakan web browser mempunyai tombol forward dan back. Tombol forward mengarah ke kanan dan tombol back mengarah ke kiri, dan tombol ini membuat pengguna menavigasi pada riwayat browsernya. Jadi simbol arah panah kanan manapun, biasanya memang menyiratkan untuk terus menuju ke halaman selanjutnya.

Media Temple menggunakan hal ini sebagai kelebihan mereka dengan cara yang halus namun menonjol.

Salah satu item navigasi pada halaman sebuah website yang paling menonjol adalah Call in Action atau CAT. Icon dapat berfungsi dengan baik untu CTA yang berguna untuk tujaun tertentu.

Sebagai contoh JQuery mempunyai tombol download yang menonjol di pojok kanan atas pada halaman utamanya. Tombol CTA ini meliputi sebuah icon download di sebelah kiri teks.

 

 

Hal ini agar kamu tahu bahwa tombol tersebut berhubungan dengan mendownload sebuah file.

Akan tetapi sebuah tombol tidak harus selalu menimbulkan sebuah aksi pada browser. Sebuah CTA dapat mengarah ke halaman lain yang berhubungan dengan produk atau layananmu.

Icon dapat digunakan untuk menjual sebuah tombol dan mengarahkan pengunjung untuk menekannya. ResumeBaking merupakan sebuah contoh yang tepat dimana CTA mereka dikelilingi oleh icon-icon dengan arah panah melengkung.

 

 

 

 

 

 

 

 

 

Icon ini membantu dalam penjualan tombol dan produk dengan cara meminta pengguna untuk menekannya. Tetapi mereka menjual berdasarkan fitur seperti membuat sebuah resume gratis, membagikannya secara online, dan mendapatkan lowongan pekerjaan.

Ya, mungkin hal ini terlihat samar namun berfungsi. Banyak pengguna hanya melihat icon + arah panah dan menekan tombol berdasarkan perhatian mereka.

Mendeskripsikan Form

Setiap website mempunyai beberapa tipe form apakah itu form untuk mendaftar email, form login akun, atau bahkan hanya sekedar form kontak.

Icon dapat dipasangkan dengan form untuk membangun kepercayaan dan mendukung tingkah laku pengguna.

Intip situs Life Could Be Better dimana situs ini mempunyai form pendaftaran email yang tetap pada bagian bawah halaman. Form ini meliputi sebuah icon amplop kecil untuk menunjukkan kegunaan dan menarik daya perhatian.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Hal ini juga berlaku untuk info kontak perusahaan dan link media sosial.

Icon digunakan mendeskripsikan konten disekitarnya. Dan karena visual lebih mudah untuk dipahami daripada kata-kata, maka hal ini akan menjadi masuk akal untuk membuat icon menjadi jelas dan mudah jika dilihat sekilas.

Teknik lain yang bagus adalah ketika desainer menambah icon pada isian di form pendaftaran. Hal ini berfungsi sangat baik ketika form mempunyai lebih dari 3-4 input dan pengguna harus mengisi semua isian.

Salah satu contohnya adalah pada WebDAM trial page yang menggunakan icon-icon yang berbeda pada tiap isian.

 

 

 

 

 

 

 

 

 

 

 

 

Icon di sini terlihat fantastis dan begitu menyatu dengan antarmuka.

Ditambah itu membantu pengguna dengan cepat mengenali apa yang tiap isian tersebut butuhkan. Karena label isian terletak di dalam form, maka label akan menghilang ketika kamu mulai mengisikan suatu informasi. Namun ini akan menjadi membingungkan ketika setelah kamu mengisi data dan kemudian lupa isian apa saja yang harus diisi.

Rekomendasi dari kami adalah menambahkan icon hanya dilakukan seperti ini ketika situsmu mempunyai lebih dari 3-4 isian di dalam form. Jika tidak, nanti akan terlihat bertele-tele.

Fitur & Penunjuk

Setiap startup baru, bisnis kecil, atau aplikasi berbasis web mempuyai serangkaian fitur dan alasan untuk mendatangkan orang ke situs mereka. Mungkin kamu dapat membuat daftar dari fiturnya, tetapi itu hanya akan membuat pengunjung bosan.

Sebagai gantinya cobalah menambahkan icon untuk membantu menjelaskan fitur dan tingkah laku umum. Visual harus mudah dipahami sehingga orang-orang tetap membaca lebih jauh ke bawah pada halaman situs.

 

 

 

 

 

 

 

 

 

 

 

Ambil contoh icon pada LightCMS. Icon tersebut sangat ramping dan terang sehingga dapat menyatu dengan halaman dengan mudah.

Tetapi icon tersebut juga menjelaskan fitur dan membantu pembaca meluncur di halaman utama dengan cepat. Icon-icon ini sendiri mungkin tidak menjual apapun pada LightCMS, namun mereka dapat membantu menjelaskan apa yang fitur tersebut lakukan dan mengapa itu berguna.

Terdapat kemiripan desain pada halaman fitur Disqus dengan icon terjajar disamping fitur yang berbeda-beda.

 

 

 

 

 

 

 

 

 

 

Kami menyukai desain ini karena icon menyatu dengan bagus dengan brand Disqus.

Dan meskipun Disqus membuat icon ini dari nol, kamu tidak perlu melakukannya. Masih banyak icon gratis yang dapat kamu download dan gunakan sesukamu.

Ringkasan

Icon adalah bagian alami dari keseluruhan antarmuka baik itu software desktop hingga website maupun aplikasi mobile. Tapi desain dan style secara konstan berubah sehingga menjadi sangat penting untuk selalu up-to-date dengan trend terakhir.

Kami harap panduan ini dapat membantumu mengukir pengalaman yang bagus dengan icon dalam berbagai kesempatan.

 

Sumber : designmodo

 

Ahmad Fauzi
Sesungguhnya hati ini. Terus hidup dengan memberikan arti. Karena sesungguhnya hikmah terbaik adalah berasal dari dalam diri. Diasah dengan hal yang memberati, bermanfaat dalam hal yang terpuji.
, , ,

Pengenalan GIT(bagian 1)

Sebagian dari anda mungkin sering bercengkerama dengan yang namanya komputer. Terutama para programmer, apalagi yang masih jomblo. Kasihan ya, yang dibuat cengkrama keseharian cuma komputer, server, dan kroni-kroninya.. hehe :p. Saya doakan deh para jomblo-jomblo yang belum menikah, semoga diberi jalan dan kemudahan Oleh Allah Subhanahu Wa Ta’ala untuk segera menemukan dambaan hatinya..aamiin

Kembali ke laptop, di tutorial kali ini saya akan membagikan materi tentang pengenalan GIT. Ini adalah salah satu bagian dari materi pelatihan git dan gitlab di kantor Telkomsel di Jakarta. Pelatihan ini adalah ini atas permintaan dari pihak Telkomsel untuk membagikan pengalaman penggunaan GIT dan GITLAB, terutama ketika di implementasikan dalam pengembangan project-project sistem yang sering di pegang oleh Profio Teknova Indonesia. Memang semenjak awal kami berdiri, hampir 2 tahun lalu, kami langsung menerapkan sistem kerja menggunakan Repository(GIT). Terbukti ini adalah formula yang cukup ampuh ketika kita melakukan development project secara bersama – sama.

Git adalah tools yang berfungsi sebagai Version Control System (VCS) pelacak perubahan pada file. Git sendiri dibuat oleh orang yang menciptakan Kernel Linux., yah mungkin temen-temen sudah kenal nama linus torvalds ya.. dialah Pencetus git, yang kita gunakan. Git diciptakan tahun 2005 saat bitkeeper mulai retak dan pencipta linux harus mencari alternatif lain untuk mendukung pengembangan kernel linux. Dengan menggunakan Git, setiap orang dalam sebuah tim dapat melakukan perubahan pada source-code tanpa harus takut terjadi bentrok ataupun kesulitan dalam menggabungkan hasil perubahan yang mereka lakukan.
Dengan menggunakan Git, setiap perubahan pada source-code akan terlacak pesan perubahannya, apa saja yang diubah, siapa yang mengubah dan kapan waktunya.

Langsung saja, kita coba berkenalan dengan perintah – perintah dasar yang sering digunakan ketika bekerja menggunakan sistem repository:

git init
Untuk membuat repo lokal baru pada perintah ini akan dibuat sebuah folder baru yang bernama “.git”
Contoh : $ git init

git status
untuk melihat status dari repo lokal
Contoh : masuk ke direktori repo lokal
$ git status

git add
Untuk menambahkan file ke dalam repo yang sebelumnya sudah dibuat
Contoh : $ git add myfile.txt

git commit
untuk menyimpan seluruh perubahan yang terjadi
Contoh : $ git commit -m "first commit"

git remote
untuk menambahkan remote repo baru
Contoh : $ git remote add origin git@bitbucket.org:xxxxx/xxxxx.git

git pull / push
untuk menyimpan dan mengambil data dari remote repo
Contoh : $ git pull origin master
$ git push origin master

git diff
untuk membandingkan perubahan file
Contoh : $ git diff
git reset
ntuk membatalkan perubahan pada repo lokal
– Contoh : $ Git reset --soft HEAD^ (Lokal)
$ Git reset --hard /

git Clone
uuntuk melakukan cloning pekerjaan yang telah exist ke lokal
– Contoh : $ git clone git@bitbucket.org:xxxxx/xxxxx.git

git merge
untuk melakukan penggabungan antar branch

git checkout
untuk pindah branch

berikut adalah lifecycle dari GIT:

, ,

Debugging pada PHP

debugging quotes

Debugging adalah salah satu metode untuk mengetahui letak kesalahan dalam suatu kode program, termasuk website. Sehingga ketika Anda mengetahui letak kesalahannya, Anda dapat memperbaiki programtersebut agar dapat berjalan dengan benar. Ada banyak cara yang dapat Anda lakukan untuk melakukan debugging. Namun, pada kesempatan ini Kami akan mencoba membahas mengenai debugging pada php dengan cara mencetak/melihat isi suatu variabel.

 

var_dump()

Fungsi var_dump() menampilkan informasi beserta struktur dari suatu variabel. Informasi yang ditampilkan antara lain tipe, panjang variabel tersebut, key (jika dalam bentuk array), dan value-nya. Contoh penggunaan var_dump() adalah sebagai berikut.

debugging dengan var_dump()

debugging pada php menggunakan var_dump()

Output yang dihasilkan dari fungsi var_dump() pada gambar di atas adalah sebagai berikut.

  • untuk variabel $greeting:
    string(12) "Hello World!"
  • untuk variabel $numbers:
    array(3) { [0]=> string(3) "one" [1]=> string(3) "two" [2]=> string(5) "three" }
  • untuk variabel $days:
    array(3) { [1]=> string(6) "Sunday" [2]=> string(6) "Monday" [3]=> string(7) "Tuesday" }

print_r()

Fungsi print_r() hampir sama dengan var_dump(), namun informasi variabel yang ditampilkan oleh print_r() lebih simpel, yaitu hanya key and element. Contoh penggunaan print_r() adalah sebagai berikut.

print_r

debugging pada php menggunakan print_r()

Output yang dihasilkan dari fungsi print_r() adalah sebagai berikut.

  • untuk variabel $greeting:
    Hello World!
  • untuk variabel $numbers:
    Array ( [0] => one [1] => two [2] => three )
  • untuk variabel $days:
    Array ( [1] => Sunday [2] => Monday [3] => Tuesday )

dd()

Fungsi dd() hanya digunakan pada Framework Laravel. Jika Anda menggunakan PHP Sktruktural maupun framework PHP yang lain, dd() tidak dapat digunakan.
Fungsi dd() sangat sesuai jika Anda hanya ingin melihat isi dari 1 variabel saja. Karena setiap kali Anda menggunakan fungsi dd(), program akan berhenti tepat setelah fungsi dd() digunakan. Contoh penggunaan fungsi dd() adalah sebagai berikut.

dd()

debugging pada php menggunakan dd()

Output yang dihasilkan dari fungsi dd() pada contoh di atas adalah sebagai berikut.

  • untuk variabel $greeting:
    "Hello World!"
  • untuk variabel $numbers:
    dd() contoh 2
  • untuk variabel $days:
    dd() contoh 3

Semoga bermanfaat dan selamat berkarya!