Tentang Halaman Responsive (Responsive Web Design)

 

Ini adalah tentang client-side. Karena perkembangan teknologi hardware sangat cepat, terutama untuk kelas tablet yang memiliki layar kecil, maka otomatis teknologi web pun mau tidak mau harus mengikuti agar memiliki tampilan ramah hardware. Karena layar tablet cenderung kecil, terlebih untuk beberapa jenis smartphone, maka ditemukan beberapa cara untuk melayani seluruh hardware tersebut, agar tatkala layar besar dia bisa tampil maksimal, dan saat layar kecil dia pun bisa tampil optimal. Cara yang telah dikembangkan antara lain:

  1. Memanfaatkan pengenalan user-agent client dari sisi server. Dalam PHP dikenal adanya $_SERVER['HTTP_USER_AGENT'] untuk menangkap dengan apakah web tersebut dibuka. Dengan demikian akan dapat dikenali jika dibuka dari mobile phone akan diberikan tampilan mini, dan ketika dibuka dari komputer akan diberikan tampilan lebar. Kelemahannya adalah, beberapa gadget tidak dikenali sebagai smartphone. Disamping itu, kerja web layouter akan menjadi ganda, membuat tampilan desktop dan menentukan tampilan mobile. Belum lagi jika berhadapan dengan netbook, komputer namun dengan layar kecil. Tampilan juga tidak optimal.
  2. Responsive Web Design. Yaitu melakukan optimalisasi CSS dan Javascript yang bekerja di sisi client, yang mana CSS versi terbaru juga telah dapat mengenali jenis perangkatnya. Namun tanpa mengenali jenis perangkatnya, CSS terbaru telah dapat dirancang untuk disesuaikan dengan lebar layar bagaimanapun bentuknya.

Dengan RWD (Responsive Web Design) tampilan akan lebih fleksibel, fluid dan segalanya akan didasarkan pada grid. Jika pada non-responsive web design lebar akan tergantung pada pixel, maka pada RWD tidak lagi, semua akan disesuaikan dengan persentase lebar, termasuk gambar dan elemen-elemen HTML lainnya.

RWD juga memanfaatkan sepenuhnya fungsi @media sebagai pelacak browser dan lebar browser. Sehingga dengan lebar berapapun browser kita, tidak akan muncul scroll kiri dan kanan. Penggunaan media query ini antara lain seperti berikut

 

 

Masukkan kode tersebut ke dalam kode CSS. Saat browser diperkecil, maka akan muncul kata SEDANG dan selanjutnya SEMPIT. Dengan memanfaatkan media query ini maka ukuran layout juga dapat disesuaikan dengan lebar browser yang ada. Cara mengetest cukup mudah. Perkecil saja web browser kita, apakah muncul perubahan tulisan?

[Tips-Trick] Bermain Dengan Peta dan keterangan Popup Tooltips

Jika pada beberapa posting lalu, telah dapat dipelajari bagaimana cara menyusun koordinat HTML dengan menggunakan Javascript, Ajax dan PHP, maka kali ini akan dicoba memanfaatkan peta tersebut dan membubuhkan keterangan dengan bentuk popup. Asyik bukan?
Misal saya memiliki data koordinat peta HTML untuk Provinsi DI Yogyakarta sebagai berikut:
Continue reading “[Tips-Trick] Bermain Dengan Peta dan keterangan Popup Tooltips”

Beda ID dan Class dalam Elemen HTML

Ada satu pertanyaan masuk : “Apakah bedanya antara ID dan CLASS dalam Elemen HTML?” Misal:

Jawabannya adalah sebagai berikut:

Untuk CSS tidak ada bedanya antara CLASS dan ID.

Semua yang dimasukkan dalam CSS akan disetting propertinya tanpa perbedaan. Misal:
Continue reading “Beda ID dan Class dalam Elemen HTML”

Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery

Webchat adalah sebuah media obrol interaktif memalui web. Contoh webchat sering kita lihat di meebo atau fasilitas chat Facebook. Kita pun bisa membuat. Secara konsep sederhana, chat terdiri dari sebuah halaman POST chat, yang dikirimkan ke server, dan ditampilkan melalui halaman web. Secara standard, web tidak akan bisa menerima POST chat dan menampilkannya tanpa merefresh. Maka dengan fasilitas Javascript, kita bisa merefreshkan beberapa bagian elemen web tersebut, tanpa harus merefresh halaman secara keseluruhan. Proses merefresh elemen(div) tersebut jika kurang bijak juga akan banyak memakan resource browser dan menghabiskan memori komputer.

webchat

Disini kita belajar memahami sebuah konsep web dengan menggunakan PHP, MySQL dan JQuery. JQuery sendiri adalah sebuah library Javascript yang telah disusun untuk keperluan penyederhanaan dan optimalisasi fungsi-fungsi javascript. JQuery ini juga cukup tangguh untuk pengganti ajax terutama untuk keperluan hubungan Client Server. Marilah kita mencoba merancang sebuah skenario pembuatan sistem chat berbasis web.

Di sini saya merancang menggunakan tiga (3) file script server utama yaitu :

  • index.php
  • login.php
  • logout.php

Script Server tersebut dikunci tampilan oleh file: styles.css. Sedangkan script sisi-client (diletakkan di direktori js) yang digunakan adalah:

  • library jquery
  • chat.js

Script pendukung di sisi server (diletakkan di direktori scripts) akan dipisahkan sesuai dengan tugasnya antara lain:

  • database.php (penghubung dengan database)
  • datetime.php (pengambil value waktu terakhir chat)
  • postchat.php (pengirim kalimat chat)
  • getchat.php (pengambil kalimat chat secara real-time)
  • chatlist.php (pengambil chat yang sudah ada sebelumnya)
  • chatuserlist.php (pengambil data user yang aktif)

Secara rancangan sistem ini akan berjalan dengan kendali penuh dari script chat.js.
Continue reading “Tutorial Membuat Aplikasi Webchat dengan PHP, MySQL, JQuery”

Berkreasi dengan Peta HTML dan tag Map Area [Bagian 2]

MENGAMBIL KOORDINAT SEBUAH TITIK DARI SEBUAH GAMBAR

Jika pada Posting lalu http://bimosaurus.com/2013/03/16/berkreasi-dengan-peta-html-dan-tag-map-area-bagian-1/ telah dipaparkan bagaimana cara menyajikan sebuah gabungan antara gambar peta dan data koordinat dalam source HTML, maka di bagian ini akan dijelaskan bagaimana cara mengambil koordinat sebuah gambar. Untuk mengambil value koordinat yang diperlukan oleh MAP AREA, kita akan menggunakan bantuan Javascript untuk menentukannya.

Format koordinat MAP AREA untuk kategori POLYGON adalah sebagai berikut :

x1,y1,x2,y2,x3,y3,x4,y4………xn,yn
Continue reading “Berkreasi dengan Peta HTML dan tag Map Area [Bagian 2]“

Berkreasi dengan Peta HTML dan tag Map Area [Bagian 1]

HTML, telah menyediakan fasilitas sederhana untuk membuat mapping sebuah gambar. Dengan menggunakan mapping gambar tersebut, dapat dikreasikan menjadi sebuah halaman yang memuat peta sederhana. Layanan HTML dalam menangani peta gambar adalah dengan menggunakan tag <map></map> yang dilengkapi dengan <area></area>. Tag MAP, terdiri dari beberapa pilihan, antara lain adalah untuk penandaan bujursangkar (rect), penandaan lingkaran (circle) dan penandaan poligon. Tag map ini membutuhkan gambar sebagai media yang akan ditandai. Sedangkan penunjuk tempat dapat menggunakan koordinat yang terdapat pada HTML source. Sintaks map dan area adalah sebagai berikut.

 
Continue reading “Berkreasi dengan Peta HTML dan tag Map Area [Bagian 1]“

[Contoh] Memanfaatkan Fungsi .append() pada JQuery untuk Aplikasi Web

Diantara anda mungkin ada yang sering memanfaatkan web chat seperti pada Facebook, GTalk, dan lain sebagainya. Mungkin juga kita sering melihat fungsi komentar yang berjalan real time pada Facebook, Twitter, dan lain sebagainya. Dimana ketika kita melakukan POST komentar atau chat, halaman web tidak perlu melakukan reloading secara keseluruhan. Kita bisa membandingkan fungsi seperti yang ada pada situs detik, dimana setiapkali komentar, halaman akan melakukan refresh secara keseluruhan, hal ini akan sangat memberatkan client terutama yang memiliki bandwidth internet kurang memadai. Sudah seharusnya halaman yang diload hanya pada yang berubah saja. Jika kita melakukan post, ya seharusnya yang berubah hanyalah pada perubahan post itu saja.

Untuk melakukan itu, kita bisa memanfaatkan fungsional JQuery .append() untuk melakukannya. .append() berfungsi untuk menambahkan sebuah elemen, dengan isi seperti parameter yang akan ditunjukkan oleh fungsi tersebut. Sebagai contoh saya memiliki script seperti demikian : Continue reading “[Contoh] Memanfaatkan Fungsi .append() pada JQuery untuk Aplikasi Web”