Aptech Jakarta
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

ApTech Jakarta
  • Beranda
  • Catering Jakarta
  • Catering Bogor
  • Catering Depok
  • Catering Tangerang
  • Catering Bekasi
  • Teknologi

Menampilkan Kondisi Online dan Offline Dengan HTML5

  • Mei 4, 2013
  • admin
0

SHARES

ShareTweet

Suatu saat kita akan membuat aplikasi yang membutuhkan distribusi konten melalui internet, aplikasi web tentunya. Ketika pengguna memakai aplikasi tersebut, hal terbaik yang patut disematkan adalah menggunakan fitur yang menampilkan apakah kondisi internet dalam posisi online atau mungkin offline. Untuk menyematkan fitur tersebut, HTML5 telah mempunyai fitur untuk menanganinya.

HTML5 Online Navigator

HTML5 Online Navigator

Lihat Demo Download Source

Fitur HTML5 ini bernama Navigator Online. Dimana implementasinya cukup mudah diikuti dan sangat baik jika dipakai untuk aplikasi web. Dalam tutorial ini, saya menggunakan browser Mozilla Firefox yang telah support untuk fitur Navigator Online HTML5.

Contents

  • 1 Tutorial
  • 2 Baca juga:

Tutorial

  • Buka folder localhost Anda, dan buat folder baru bernama “html5online” (opsional),
  • Buat file bernama index.html. Tulis kode berikut :


<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1“>
<title>HTML5 Navigator</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js“></script>
<link href=”http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300” rel=”stylesheet” type=”text/css“>
<link href=”style.css” rel=”stylesheet” type=”text/css“>
<body>
<div class=”top“>
</div>
<section id=”wrapper“>
<header>
<h1>HTML5 Navigator Online</h1>
</header>
<section>
<h3>Kondisi Internet Anda: <span id=”kondisi“>checking…</span></h3>
<p>Cek dengan cara mematikan fitur online, jika di Mozilla Firefox (klik File –> Work Offline)</p>
<p>Atau dengan mematikan koneksi internet di Komputer Anda</p>
</section>
<script>
var status = document.getElementById(‘kondisi’)
setInterval(function () {
status.className = navigator.onLine ? ‘online’ : ‘offline’;
status.innerHTML = navigator.onLine ? ‘online’ : ‘offline’;
}, 100);
</script>
</body>
</html>

view raw

index.html

hosted with ? by GitHub

Setelah membuat file index.html tersebut, Anda bisa membuka browser Firefox lalu mencoba dengan mengatur settingan online atau offline koneksi internet. Pengaturan ini terletak di menu File, lalu centangi Work Offline untuk offline dan hilangkan centang Work Offline untuk kembali ke kondisi online.

Saya menyarankan Anda untuk menggunakan browser Mozilla Firefox ketika membuat tutorial atau menjalankan demo HTML5 online navigator ini.

Baca juga:

  1. Berkreasi Dengan Google Maps dan HTML5 Geolocation
  2. Menyimpan String Data Dengan HTML5 Localstorage
  3. Menyimpan Gambar Offline Ke Browser Menggunakan imgcache.js
  4. Penerapan Tag Audio HTML5
  5. Menyematkan Video Youtube Dengan HTML5 – Fathin Edition
 
admin

Previous Article
  • Teknologi

Menyimpan String Data Dengan HTML5 Localstorage

  • Mei 3, 2013
  • admin
View Post
Next Article
  • Aplikasi
  • Teknologi

Peralatan Developer Aplikasi Mobile Untuk Semua Platform

  • Mei 5, 2013
  • admin
View Post

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Pos-pos Terbaru
  • 8 HP Untuk Main Call of Duty Mobile Terbaik 2023
  • Game Esports Terbaik
  • Rekomendasi 10 Game Browser Terbaik
  • Aplikasi Pengunci Aplikasi Android Terbaik
  • 6 Smartwatch Terbaik 1 Jutaan Tahun 2022, Super Canggih!
Arsip
Kategori
  • Android
  • Aplikasi
  • Gadget
  • Game
  • Teknologi
  • Website
  • Windows
Wedding Organizer

Wedding Organizer Surabaya | Wedding Organizer Gresik | Wedding Organizer Malang | Wedding Organizer Madura | Wedding Organizer Mojokerto | Wedding Organizer Jakarta | Wedding Organizer Bogor | Wedding Organizer Depok | Wedding Organizer Tangerang | Wedding Organizer Bekasi

Partner

Catering Surabaya | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi | Catering Jakarta Murah | Catering Bogor Murah | Catering Depok Murah | Catering Tangerang Murah | Catering Bekasi Murah

External Link

Supplier Sayur | Supplier Buah | Hosting Gratis
Catering Surabaya
 | Catering Gresik | Catering Malang | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Catering Surabaya | Catering Malang | Catering Gresik | Catering Mojokerto | Catering Jakarta | Catering Bogor | Catering Depok | Catering Tangerang | Catering Bekasi

Blog Teknologi Jakarta
Berita dan artikel teknologi dan Informasi Jakarta

Input your search keywords and press Enter.