Tiga Cara Implementasi Mobile Web

Seiring berkembangnya Smartphone dan Tablet , berkembang pula pembuatan website yang dikhususkan untuk pengguna mobile. Saat ini ada 3 cara yang paling populer dalam mengimplementasikan website untuk diakses digadget dengan keterbatasan layar yang kecil dengan antarmuka touchscreen. Tiga teknik yang akan saya jelaskan adalah Mobile site,  Dynamic Serving, Responsive design.

Responsive Web Desain
Responsive Web Desain

Mobile Site

Mobile site juga sering disebut juga dengan teknik separete URL karena pembuat web harus membuat dua versi untuk webnya. Biasanya mobile site menggunakan subdomain m atau mobile di urlnya. Contohnya m.detik.com, m.facebook.com dan sterusnya. Teknik ini adalah teknik paling lama dan sekarang sudah mulai ditinggalkan. Berikut ini adalah kelebihan dan kekurangannya

Kelebihan 

  1. Loading lebih cepat karena content yang di load lebih sedikit.
  2. Mampu berfungsi dengan baik bahkan di Feature phone

Kekurangan

  1. Repot karena harus membuat dua versi website versi desktop dan versi mobile
  2. Tidak bagus dari sisi seo karena ada dua alamat url untuk content yang sama.
  3. Biasanya tampilan dari mobile site tidak menarik karena fokus pada “yang penting content bisa dibaca”.

Dynamic Serving

Dynamic Serving digunakan untuk mengatasi permasalahan SEO di mobile site. Dengan dynamic serving, dari manapun user mengakses, baik dari feature phone, smartphone,atau desktop Browser) alamat URL Tetap sama dan ini sangat bagus buat SEO. User akan mendapatkan website sesuai dengan device yang sedang dipakainya dan tanpa mengakses URL yang berbeda.

Kelebihan

  1. Content disesuaikan dengan perangkat
  2. bekerja dengan baik disegala perangkat jika di implementasikan dengan benar
  3. Menggunakan satu URL sehingga bagus buat SEO.

Kekurangan 

  1. Implementasinya cukup rumit karena kita harus mengimplementasikan semau proses di server
  2. Harus mendata user agent di setiap gadget/device
  3.  Proses redirect menyebabkan waktu akses menjadi lebih lama

Responsive Web design

Teknik ketiga inilah yang sedang trend di dunia Web.  Teknik ini memanfaatkan Meta View Port di HTML5. Apa kelebihannya?

Kelebihan

  1. Implementasi Mudah karena hanya menyediakan satu website dan satu base code
  2. Bagus buat SEO karena hanya menggunakan satu URL
  3. Tampilan halaman web akan menyesuikan diri dengan perangkat user (adaptive)

Kekurangan 

  1. Boros Bandwidth jika diakses dari perangkat feature phone/smartphone karena content sama persis dengan web desktop
  2. Waktu loading sama dengan waktu loading akses desktop
  3. Responsive web design hanya berjalan untuk perangkat yang mendukugn HTML5 Meta View Port

Dari penjelasan diatas, tidak ada teknik yang paling bagus, yang ada adalah yang paling sesuai dengan budget, Kemampuan developer  dan besarnya website. Namun jika dilihat dari sisi teknis, maka teknik Responsive web Design adalah yang paling mudah di implementasikan  bahkan oleh orang awam sekalipun. Jika anda memakai wordpress, teknik ketiga ini lebih mudah lagi karena cukup mengunakan Thema WordPress yang responsive.

Untuk mengimplentasikan cara diatas, sudah banyak tutorial di internet, namun jika sempat saya akan memberi contohnya di lain waktu.  Referensi lebih lanjut tentang 3 teknik diatas bisa dibaca di link berikut :

  1. Mobile SEO, https://developers.google.com/webmasters/mobile-sites/mobile-seo/
  2. A Cheat Sheet for Mobile Design: Responsive Design, Dynamic Serving and Mobile Siteshttp://www.bruceclay.com/blog/mobile-design-cheat-sheet/
  3. A Comparison of Methods for Building Mobile-Optimized Websites, http://sixrevisions.com/mobile/methods-mobile-websites/

Membuat Aplikasi Desktop Dengan Teknologi Web

Era saat ini, Teknologi komputasi di dominasi oleh cloud, server, web dan mobile. Dari sini juga tampak muncul konvergensi UI. Mengapa Web mendominasi semua aspek komputasi modern? Alasan utama dalah faktor keterbukaan. Berbeda dengan teknologi pengembangan aplikasi desktop yang cenderung berlisensi dan berbayar baik untuk compiler, editor ataupun IDE nya, web bukanlah milik perusahaan tertentu. Unuk menjadi programer web pun modalnya kecil dan banyak pilihan. Di sisi hasil program/aplikasipun Web punya kelebihan bisa diakses disembarang platfrom, dari Browser, TV Pintar, Game console sampai smartphone hanya dengan satu kode.

Walaupun Teknologi web dan platform Web sendiri punya banyak kelebihan, bukan berarti Aplikasi desktop sudah mati. Lihatlah aplikasi Developer tool, Graphic design, Enginering, Office dan Game masih didominasi oleh desktop. Nilai plus lain dari aplikasi desktop adalah tetap bisa berjalan walaupun dalam kondisi Offline. Karena hal inilah, maka banyak programer web yang ingin membuat aplikasi desktop namun tanpa belajar (banyak hal) baru. Apakah hal ini mungkin?

Alhamdulillah Saat ini hal tersebut sudah memungkinkan dibuat. Dari berbagai teknologi Web, ada 3 teknologi yang bisa coba untuk membuat aplikasi desktop yang sudah banyak dipakai . Dua aplikasi populer desktop adalah Atom Editor dari Github dan Google Keep dari Google yang dibangun dengan teknologi web namun berjalan offline. Agar tidak panjang lebar berikut ini adalah teknologi yang bisa anda pelajari. Kelebihan membuat aplikasi desktop dengan teknologi web ada 3 yaitu

  1. Komponen free dan open source (tanpa biaya)
  2. Berjalan di MultiPlatfrom (Mac, Linux, Windows)
  3. Tanpa (banyak) belajar hal baru.

Chrome App

ChromeApp adalah istilah untuk aplikasi desktop yang dibangun diatas Runtime Google chrome. Aplikasi Chrome App ini bisa berjalan Offline atau online ataupun hibrid. Aplikasi bisa berjalan Offline, namun saat online, data yang sedang kita olah secara otomatis disinkronkan keserver. 3 Aplikasi berbasis ChromeApp yang cukup populer adalah  Google Docs  for Chrome, Google Keep dan LucidChart. Walaupun demikian teknologi ini juga bisa dipakai untuk membuat game 3D keren dengan mengkombinasikan dengan NaCL, teknologi Native yang diimplementasikan di Runtime Chrome.

 

Contoh aplikasi offline Chrome
Contoh aplikasi offline Chrome

 

Sumber Referensi : https://developer.chrome.com/apps/about_apps.

Contoh Aplikasi :  https://chrome.google.com/webstore/category/apps?_feature=offline&_feature=chromeapp

 

Electron

Electron adalah framework yang dipakai untuk membuat Atom Editor. Atom Editor sendiri adalah Editor source code dari Github.  Gambar dibawah ini menunjukan icon dari aplikasi yang dibangun dengan electron.  Informasi lebih lanjut tentang teknologi ini silahkan merujuk http://electron.atom.io/

 

 

Contoh aplikasi yang dibangun dengan electron
Contoh aplikasi yang dibangun dengan electron

 Node Webkit /NwJS

Pada mulanya nama dari teknologi ini adalah node-webkit, namun mungkin karena alasan trademark maka nama teknologi ini berubah menjadi NwJS. Baik Electron dan nwJS memang bergantung pada teknologi Node. NwJS ini sangat cocok dipakai sebagia Wrapper alias aplikasi pembungkus dari aplikasi web yang kita buat. Sampai saat ini, teknologi nwjs masih alpha yang artinya masih dalam tahap percobaan.

Jika anda punya aplikasi web menggunakan PHP MySQL dan client minta dibuatkan aplikasi desktopnya, bungkus saja aplikasi PHP MySQLnya dengan NwJS, orang awam tidak akan tahu perbedaannya. Saya mengenal teknologi ini dari buku terbitan loko media yang menurut saya cukup bagus karena disertai dengan contoh real. Judul buknya adalah “Sistem Aplikasi travel dengan AngularJS dan CodeIgniter“.

Tiga teknologi diatas tidak ada yang paling bagus, namun lebih tepat mana yang paling cocok dengan project yang sedang kita kerjakan. Sebagai contoh, jika kita sudah punya aplikasi web  yang dibangun dengan teknologi cloud dan ingin dibuatkan aplikasi desktopnya, maka saya sarakan menggunakan ChromeApp, jika kita ingin membuat aplikasi desktop murni dan aplikasi ini tidak terkoneksi internet maka electron adalah pilihan yang tepat, yang terakhir jika anda sudah buat aplikasi PHP dan ingin dibuatkan aplikasi desktopnya NWJS adalah solusi yang cocok untuk anda.