PENGGUNAAN HTML5 DALAM PERKEMBANGAN WEB 2.0 YANG DIRANCANG DENGAN RESPONSIVE WEB DESIGN

JURNAL TEKNIK INFORMATIKA, JUNI 2015 1

PENGGUNAAN HTML5 DALAM PERKEMBANGAN WEB 2.0 YANG DIRANCANG DENGAN RESPONSIVE WEB DESIGN

Putri Prima Richwandi S1 Program Studi Teknik Informatika Fakultas Teknologi Industri, Universitas Gunadarma Jl. Margonda Raya No.100 Depok, Telp.(021)78881112 email: [email protected]

ABSTRAKSI Tak dapat dipungkiri bahwa teknologi semakin berkembang cepat seiring dengan berkembangnya jaman. Yang pada awalnya teknologi hanya diperuntukkan untuk perkembangan kemiliteran di Amerika, namun kini pengembangan dan pemanfaatan teknologi jaringan dan komunikasi mengalami perkembangan yang sangat pesat pada kehidupan evolusi manusia hingga saat ini, dan akan terus berkembang. Perkembangan teknologi yang sangat pesat saat ini mendorong internet dan web untuk menjadi standar komunikasi yang terbaru. Dengan diperkenalkannya konsep Web 2.0 dan standar HTML5, web diharapkan dapat menjadi standar komunikasi yang universal. Di sisi lain, Rich Internet Application (RIA) menjadi tren perkembangan teknologi web saat ini. Dengan teknologi tersebut, aplikasi web didesain dengan pendekatan aplikasi desktop, mengedepankan kecepatan akses, kemudahan bagi pengguna, dan keinteraktifan. Dengan mengimplementasikan fiturfitur baru dari HTML5, akan dihasilkan aplikasi web yang,mengikuti konsep RIA. Dalam mengakses halaman web tentunya kita menggunakan perangkat bergerak seperti tablet ataupun smartphone. Namun memiliki perbedaan, secara tampilan atau desainnya dibandingkan saat diakses menggunakan dekstop komputer atau baik itu PC,notebook,dan laptop. Dikarenakan secara ukuran resolusi perangkat bergerak seperti tablet dan smartphone memiliki resolusi ukuran yang berbeda dengan dekstop komputer. Ketidak nyamanan yang dirasakan pengguna pada saat mengkases halaman web di perangkat bergerak atau mobile device inilah yang mendorong lahirnya sebuah konsep Responsive Web Design. Adapun pengertian dari Responsive Web Design itu sendiri adalah sebuah teknik yang digunakan untuk membuat layout web menyesuaikan dengan tampilan device atau perangkat yang digunakan pengunjung web baik ukuran maupun orientasi tampilan secara tegak atau portrait dan tampilan secara mendatar ataupun landscape. Keyword : HTML5, Web 2.0, Responsive web design, Perangkat bergerak, VoIP.

1. PENDAHULUAN Dengan pesatnya perkembangan teknologi di dunia ini yang salah satunya karena adanya jaringan internet. Internet itu sendiri adalah sebagai salah satu media informasi yang efektif dan efisien dalam penyampaian informasi yang bisa diakses setiap orang kapan dan dimana saja. Sekarang internet menjadi salah satu

kebutuhan masyarakat dalam memperoleh informasi, hal ini didukung oleh perkembangan mobile device atau perangkat bergerak seperti, tablet dan smartphone yang semakin memudahkan banyak orang untuk melakukan aktivitas berbasis web seperti melihat informasi di social media, registrasi via web, pemesanan tiket atau barang via web dan kegiatan lainnya yang di sediakan melalui sebuah

JURNAL TEKNIK INFORMATIKA, JUNI 2015 2

web. Hal tersebut dapat dilakukan dengan tablet dan smartphone. Dari sisi kenyamanan bagi pengguna pada saat mengakses sebuah halaman web pengguna harus melakukan resize atau menggatur kesesuaian tampilan web tersebut dengan perangkat bergerak yang digunakan saat itu agar mendapatkan tampilan yang paling maksimal bagi pengguna. Selain itu pula teknologi Voice over Internet Protocol (VoIP) kini berkembang sebagai salah satu metode komunikasi yang layak diperhatikan. Teknologi ini sering dipertimbangkan sebagai sebuah alternatif metode komunikasi karena memiliki keunggulan-keunggulan dibandingkan Public Switched Telephone Network (PSTN) yang ada saat ini. Keunggulan tersebut antara lain biaya penggunaannya yang lebih rendah dan fungsionalitas yang lebih banyak. Konsep Rich Internet Application (RIA) adalah sebuah konsep dalam pembuuatan aplikasi web yang berisi poinpoin yaitu pembuatan aplikasi web dengan pendekatan aplikasi desktop, mengedepankan kecepatan akses, kemudahan pemakaian untuk pengguna, dan interaksi secara real-time. Konsep ini menggabungkan fungsionalitas antarmuka dari aplikasi desktop pada aplikasi web dan memanfaatkan teknologi komunikasi untuk keinteraktifannya. Sehingga aplikasi dengan konsep RIA memberikan pengalaman responsif, efektif, dan intuitif untuk pengguna. Dengan mengimplementasikan konsep RIA pada implementasi klien SIP berbasis web akan memudahkan pengguna dalam melakukan komunikasi melalui VoIP serta turut mempopulerkan VoIP sebagai alternatif metode komunikasi yang murah. Di sisi lain, terdapat kekurangan yang di miliki oleh konsep RIA yaitu ketergantungan pada penggunaan aplikasi pengaya peramban dari pihak ketiga seperti Flash dan Silverlight. Standar HTML5 yang merupakan pengembangan lanjut dari standar HTML, menyempurnakan elemenelemen lama dan menambah API baru

untuk pembuatan aplikasi web yang lebih kompleks. Penggunaan standar HTML5 pada implementasi klien SIP berbasis web ini di harapkan dapat menghilangkan penggunaan aplikasi tambahan yang selama ini digunakan untuk membuat RIA. Ketidak nyamanan yang dirasakan pengguna pada saat mengkases halaman web di perangkat bergerak atau mobile device inilah yang mendorong lahirnya sebuah konsep Responsive Web Design, Responsive Web Design adalah sebuah teknik yang digunakan untuk membuat layout web menyesuaikan dengan tampilan device atau perangkat yang digunakan pengunjung web baik ukuran maupun orientasi, sehingga tampilan yang berada di dekstop komputer dengan tampilan di perangkat bergerak atau mobile device akan tetap sama nyamannya dengan tampilan halaman web tersebut saat ditampilkan di dekstop komputer. Adapun pengidentifikasian masalah tersebut tertuju pada pengunjung web yang kurang nyaman pada saat pengaksesan halaman web karena beda resolusi perangka yang digunakan. Ada baiknya si pengembang web membuat 2 versi untuk desktop komputer maupun mobile device. Sehingga tujuan dan manfaatnya untuk dapat merancang sebuah website yang dapat menyesuaikan tampilan device atau perangkat yang dgunakan pengunjung web. Serta dapat menghasilkan sebuah website yang bersifat responsible. (Jurnal Informatika UKM, Vol. I, No. 2, Desember 2005/Analisa dan Desain Sistem Bimbingan Tugas Akhir Berbasis Web dengan Studi Kasus Fakultas Teknologi Informasi dan Jurnal Teknik ITS Vol. 1, Sept, 2012/implementasi klien sip berbasis web Menggunakan html5 dan node.js) 2. METODE PENULISAN Pada tahapan ini, penulis dilakukan metode dengan cara mencari literature dari browsing internet. Adapun isi dari referensi jurnal-jurnal tersebut banyak mengambil literature dari buku-buku. Pada (Jurnal

JURNAL TEKNIK INFORMATIKA, JUNI 2015 3

Informatika UKM, Vol. I, No. 2, Desember 2005/Analisa dan Desain Sistem Bimbingan Tugas Akhir Berbasis Web dengan Studi Kasus Fakultas Teknologi Informasi) metode penulisan yang digunakan adalah menggunakan metode penelitian. Sehingga dalam pembahasannya banyak menyinggung mengenai analisis penelitian-penelitian. Pada (Jurnal Teknik ITS Vol. 1, Sept, 2012/implementasi klien sip berbasis web Menggunakan html5 dan node.js) metode penulisan yang digunakan pada jurnal ini dengan pembelajaran dan pemahaman pada literatur yang berkaitan dengan permasalahan, baik itu berupa referensi dari buku maupun referensi dari halaman web. Sementara pada (jurnal Volume 2 : Nomor : 1 Edisi : Oktober 2013 – Maret 2014/ Perancangan Website Menggunakan Responsive Web Design), metode yang digunakan adalah literature yang diambil dari buku-buku maupun dari halaman web. 3. TINJAUAN PUSTAKA 3.1 HTML5 HTML5 (Hypertext Markup Language version 5) adalah sebuah bahasa markah yang menstrukturkan isi dari World Wide Web, sebuah teknologi utama pada internet. Standar HTML5 menyempurnakan elemen-elemen lama yang terdapat pada standar sebelumnya, menambahkan elemen-elemen yang semantik dan menambahkan fitur-fitur baru untuk mendukung pembuatan aplikasi web yang lebih kompleks . Fitur-fitur yang digunakan pada implementasi klien SIP ini antara lain HTML5 Video, Websocket dan WebRTC. HTML5 Video adalah elemen baru pada HTML5 yang bertujuan untuk menampilkan dan memainkan berkas video. Websocket adalah implementasi koneksi soket yang berjalan diatas protocol HTTP yang menyediakan aliran data secara real-time antara klien dan server. WebRTC (Web Real-Time Communication) adalah sebuah antarmuka pemrograman perangkat lunak yang menelusuri kemungkinan komunikasi data audio dan video antar

pengguna melalui perambah. (Jurnal Teknik ITS Vol. 1, Sept, 2012/implementasi klien sip berbasis web Menggunakan html5 dan node.js) 3.2 Web Web merupakan kumpulan dokumen–dokumen yang tersebar di mesin–mesin di internet. Dokumen ini biasa disebut page (halaman HTML). Tiap page mengandung link ke page yang lain di mesin yang lain di internet. Halaman web yang melakukan point ke halaman yang lain ini dinamakan menggunakan Hypertext. String yang melakukan link ke halaman yang lain disebut dengan Hyperlink (Tabratas Tharom, Marta Dinata dan Xerandy, dalam Bertha, 2001:64). 3.3 Responsive Web Design Berdasarkan artikel UIE yang berjudul ”Device Experience & Responsive Design”, responsive design merupakan salah satu teknik yang dapat membuat proses perancangan aplikasi dan situs web untuk berbagai jenis perangkat menjadi lebih mudah. Hal ini dikarenakan bahwa dengan menggunakan responsive design, perancang dimungkinkan untuk dapat menerapkan solusi bagi berbagai resolusi layar, density, dan rasio aspek pada banyak jenis perangkat. Responsive design memiliki kemampuan untuk mengelola aset media dengan efektif. Hal ini memberikannya keunggulan untuk dapat diterapkan ke dalam perancangan situs web sehingga situs dapat diakses melalui smartphone, tablet, desktop, ataupun smart TV tanpa memperlihatkan perbedaan yang terlalu besar dalam hal penggunaan. (jurnal Volume 2 : Nomor : 1 Edisi : Oktober 2013 – Maret 2014/ Perancangan Website Menggunakan Responsive Web Design) 3.4 Voice over Internet Protocol (VoIP) Voice over Internet Protocol (VoIP) adalah sebuah system yang dapat melakukan transmisi suara sebagai paket data melalui internet protocol (IP). VoIP

JURNAL TEKNIK INFORMATIKA, JUNI 2015 4

yang menggunakan packet-switching protocol yang dapat berjalan di berbagai jenis jaringan, seperti jaringan public, private, kabel, bahkan wireless. VoIP terdiri dari beberapa unsur yang membentuk system tersebut yaitu: 1) User agent merupakan perangkat lunak maupun perangkat keras yang bertugas melakukan dan menerima panggilan. 2) Proxy yang mengubungkan antar pengguna dan melakukan routing panggilan. 3) Protokol merupakan serangkaian aturan yang wajib dipenuhi oleh user agent maupun proxy agar komunikasi dapat terjadi. Beberapa protokol pensinyalan antara lain SIP, H.323 dan IAX2. (Jurnal Teknik ITS Vol. 1, Sept, 2012/implementasi klien sip berbasis web Menggunakan html5 dan node.js)

3.

4. 4. PEMBAHASAN 4.1 Jurnal Informatika UKM, Vol. I, No. 2, Desember 2005/Analisa dan Desain Sistem Bimbingan Tugas Akhir Berbasis Web dengan Studi Kasus Fakultas Teknologi Informasi. 

Analisa Kebutuhan Sistem Sistem yang dikembangkan diharapkan mampu mengakomodasi sistem bimbingan tugas akhir konvensional secara lebih baik. Beberapa hal yang menjadi titik perhatian dalam sistem ini antara lain: 1. Organisasi pencatatan konsultasi Dengan penerapan sistem ini maka proses pencatatan data konsultasi dapat lebih akurat dibanding metode konvensional. Data akan tersimpan dalam sebuah basis data khusus yang memungkinkan data terdata secara lebih baik. 2. Sistem yang informatif Analisa dan Desain Sistem Bimbingan Tugas Akhir Berbasis Web dengan Studi Kasus Fakultas



Teknologi Informasi (Frederick Constantianus, Bernard Renaldy Suteja) Dengan basis data terintegrasi dosen pembimbing akan dapat mengetahui data terakhir konsultasi seorang mahasiswa bimbingannya. Bila ditemukan bahwa terjadi keterlambatan mahasiswa melakukan konsultasi, dosen pembimbing dapat mengirimkan pesan peringatan dini kepada bimbingannya yang bersangkutan. Limitasi akses sistem Proses pendataan konsultasi hanya dapat dilakukan oleh dosen pembimbing. Sedangkan proses pendataan dosen, mahasiswa, serta hal-hal yang berhubungan dengan informasi akademis seperti jadwal sidang dan lainnya akan dilakukan oleh pihak administrasi. Komunikasi terintegrasi Akan tersedia fasilitas komunikasi bagi mahasiswa dengan dosen dengan menggunakan metode chatting via web, dan data chatting dapat disimpan dalam file teks atau html. Selain itu juga akan disediakan fitur pengiriman pesan antara dosen dan mahasiswa serta fitur message board.

Analisa Fitur Beberapa fitur utama yang ingin ditampilkan dari sistem akan dikelompokkan menurut jenis user login. 1. Mahasiswa Pada halaman khusus mahasiswa akan tersedia informasi, antara lain: a. Informasi waktu terakhir konsultasi. Bila mahasiswa belum melakukan konsultasi berikut sampai batas waktu yang telah di tetapkan maka sistem akan memberikan peringatan. b. Informasi daftar jumlah bimbingan yang telah ditempuh.

JURNAL TEKNIK INFORMATIKA, JUNI 2015 5

c. Informasi akademis dari administrasi sistem berkaitan dengan pembuatan tugas akhir. d. Pengiriman pesan one-to-one dengan dosen pembimbing. Serta one - to - many via message board dengan seluruh pengguna. e. Komunikasi via chatting. 2. Dosen Pembimbing Pada halaman khusus untuk dosen akan tersedia informasi dan fitur tertentu antara lain: a. Pendataan konsultasi / pencatatan form bimbingan online. b. Finalisasi seorang mahasiswa bila dia sudah siap untuk Ujian Sidang Tugas Akhir. Hal ini dilakukan pada halaman finalisasi yang hanya bisa diakses jumlah bab pada laporan telah selesai dan mendapat persetujuan pembimbing. c. Daftar mahasiswa bimbingannya serta informasi topik yang diambil mahasiswa tersebut sebagai reminder bila dosen menangani banyak mahasiswa sekaligus. d. Informasi waktu terakhir konsultasi setiap mahasiswa. Bila dalam jangka waktu tertentu dosen belum mendata konsultasi, sistem akan memberikan peringatan bahwa telah terjadi keterlambatan konsultasi. e. Informasi daftar jumlah bimbingan mahasiswa tertentu. f. Pengiriman pesan one-to-one dengan mahasiswa bimbingannya. Serta oneto-many via message board. g. Komunikasi via chatting. 3. Administrasi Administrasi adalah pihak yang bertugas mengawasi dan mengatur tata tertib dalam pembuatan Tugas Akhir. Pihak ini dapat bagian dari Tata Usaha ataupun Koordinator

Tugas Akhir yang telah ditunjuk khusus. Pada halaman khusus administrasi akan tersedia informasi antara lain: a. Daftar nama mahasiswa yang mengambil Tugas Akhir beserta nama dosen pembimbingnya. b. Daftar dosen pembimbing. c. Pembuatan user mahasiswa baru berisi topik dan keterangannya serta pendaftaran nama dosen tertentu untuk mahasiswa yang bersangkutan. d. Pembuatan user dosen pembimbing baru. e. Pendataan jadwal atau informasi baru mencakup penambahan atau perubahan yang sudah ada. f. Indikator siap untuk Ujian Sidang Tugas Akhir seorang mahasiswa. g . Pembuatan report.  Realisasi Sistem Realisasi aplikasi web ini dimulai dengan melakukan desain interface, baik untuk layout maupun tampilan menu. Kemudian di lanjutkan dengan pembuatan halaman - halaman berisi fitur yang di perlukan dalam sistem. 4.2

Jurnal Teknik ITS Vol. 1, Sept, 2012/implementasi klien sip berbasis web Menggunakan html5 dan node.js.

A. Deskripsi Umum Pada Tugas Akhir ini akan dikembangkan suatu system klien-server SIP berbasis web. Aplikasi klien dikembangkan memakai bahasa markah HTML5. Sedangkan pada sisi server, digunakan Node.js yang berbasis bahasa JavaScript. Pada aplikasi web ini, pengguna dapat melakukan pendaftaran SIP kemudian melakukan panggilan dan mengirim pesan instan. B. Arsitektur Sistem Rancangan arsitekstur dari sistem yang dibuat dapat diilustrasikan dalam

JURNAL TEKNIK INFORMATIKA, JUNI 2015 6

diagram Gambar 1. Pada gambar tersebut terdapat dua komponen utama yaitu klien dan server. Pada klien berupa aplikasi peramban yang mendukung HTML5, sementara pada server terdapat aplikasi Node.js yang terdiri dari beberapa modul seperti HTTP Server, Sip.js dan Websocket-Node. Server Node.js ini melayani semua permintaan pengguna dengan dibantu modul-modul yang ditunjuk. Modul HTTP Server menangani pengambilan laman HTML, modul Websocket-Node menangani koneksi Websocket sementara modul Sip.js menangani pesan SIP dari pengguna. Pesan SIP akan dikirimkan melalui server, sedangkan koneksi aliran media terjadi secara langsung antara pengguna.

2. Menghapus Pendaftaran SIP Data pendaftaran SIP pengguna akan dihapus dari server. 3. Melakukan Panggilan Pengguna menginisiasi sesi panggilan baru dengan pengguna lain. 4. Menerima Panggilan Pengguna menerima undangan sesi panggilan dari pengguna lain. 5. Menghentikan Panggilan Pengguna menghentikan sesi panggilan. 6. Mengalirkan Data Video Pengguna dapat memilih untuk mengalirkan atau tidak mengalirkan data video. 7. Mengalirkan Data Audio Pengguna dapat memilih untuk mengalirkan atau tidak mengalirkan data audio. 8. Mengirim Pesan Instan Pengguna mengirim pesan instan pada pengguna lain.

4.3 C. Deskripsi Singkat Aplikasi Aplikasi Klien SIP berbasis web ini memiliki fitur-fitur yang diilustrasikan pada diagram kasus penggunaan pada Gambar 2 berikut ini.

1. Melakukan Pendaftaran SIP Pengguna melakukan pendaftaran SIP agar dapat di hubungi dan menghubungi pengguna lain.

Jurnal Volume 2 : Nomor : 1 Edisi : Oktober 2013 – Maret 2014/ Perancangan Website Menggunakan Responsive Web Design.

Perancangan sebuah website umumnya dirancang menggunakan HTML atau HyperText Markup Languagedan CSS atau Cascade Style Sheet, HTML digunakan sebagai struktur pembentukan website dan CSS digunakan untuk pendesainan layout web dan memperindah tata letak dari suatu halaman web. HTML merupakan sebuah bahasa standard yang digunakan secara luas untuk menampilkan halaman web.Berkas-berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan ke dalam format ASCII normal sehingga menjadi homepageyang dibuat dengan perintah-perintah HTML. HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Perkembangan HTML saat ini

JURNAL TEKNIK INFORMATIKA, JUNI 2015 7

telah mencapai HTML 5, dimana HTML 5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web. Kelebihan HTML 5 dibandingkan dengan HTML versi sebelumnya adalah sebagai berikut, (Arifin,2012) ; 1.

2.

3. 4. 5. 6. 7.

HTML5 Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML. Pada versi sebelumnya, untuk bias memberikan interaksi "menggambar" di halaman , kita harus memakai applet Java atau Flash. HTML 5 akan memberikan satu opsi tambahan berupa canvas, media yang bisa dicorat-coret langsung, tidak lagi perlu memuat plug-in khusus, berupa Element canvas, sebagai mode untuk menggambar objek dua dimensi (2D). Embed Audio Video secara langsung. Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya. Integrasi (’inline’) MathML dan SVG dengan doctype yang lebih sederhana. Koding yang lebih efisien. Dapat dimengerti oleh browser lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi. Beberapa struktur elemen baru yang hadir di HTML5 ; 1. Header : mengandung informasi awal dari sebuah seksi atau halaman, bias mengacu pada dokumen hingga seluruh isi konten. 2. Nav : digunakan untuk menampung link menuju halaman lain, atau menuju bagian lain di halaman yang sama. 3. Section : mewakili bagian dari halaman aplikasi, mirip dengan 'div'. 4. Article : mewakili bagian tertentu dari dokumen yang bisa berdiri sendiri. 5. Aside : mewakili konten yang berhubungan dengan area utama

dari dokumen, biasanya dimiliki oleh sidebar yang berisi "related post", "tag clouds", dll. 6. Footer : digunakan sebagai tanda, tidak hanya pada halaman, tapi semua bagian yang ada, biasanya digunakan lebih dari satu kali. CSS yang memiliki kepanjangan Cascade Style Sheet ini digunakan desainer web untuk mengatur style elemen yang ada dalam halaman web mereka, mulai dari memformat text, sampai pada memformat layout, CSS merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. Beberapa kelebihan yang ada pada CSS3; 1.

2.

3.

4.

CSS3 bisa lebih detail untuk mendeklarasikan objek yang akan diberikan style. Contohnya di dalam objek ”blockquote” bisa membuat (quote) di awal dan akhirnya menggunakan font lebih besar dari konten blockquote itu sendiri. CSS3 kaya akan fitur untuk animasi dan efek untuk teks atau objek,yang sebelumnya tidak bisa dilakukan oleh CSS 2/CSS 2.1, dan bisa menggantikan peran gambar. Standar web 2.0 atau situs interaktif dan efisien berdasar dari penggunaan CSS. Dengan CSS3 situs akan bisa lebih berkembang dan bisa lebih interaktif lagi dengan pengunjung. Bisa mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis mengurangi bandwidth inbound/outbound situs. Dalam penelitan ini akan akan dirancang desain sebuah website yang akan menggunakan Responsive Web Design, dalam perancanganya maka akan digunakan HTML 5 sebagai struktur pembentukan website dan CSS3 digunakan dalam pendesainan layout web tersebut yang terdiri atas ;

JURNAL TEKNIK INFORMATIKA, JUNI 2015 8

4.3.1

HTML 5 HTML 5 menawarkan kelebihan yang luar biasa dibandingkan generasi sebelumnya yakni HTML 4 dan element yang digunakan pada HTML 5 lebih memiliki arti atau gampang kita pahami saat kita membaca atau menuliskannya. Berikut ini contoh tampilan website yang menggunakan Reponsive Web Design berdasarkan ukuran device yang digunakan untuk mengakses website tersebut; Gambar 4.Tampilan Antar Muka Website Menggunakan Responsive Web Design dengan ukuran Smartphone.

Gambar 2. Tampilan Antar Muka Website Menggunakan Responsive Web Design dengan ukuran layar Komputer Dektop

Gambar 3.Tampilan Antar Muka Website Menggunakan Responsive Web Design dengan ukuran tablet.

Desain responsif ini memungkinkan pengembang web untuk : 1. Dinamis melakukan pergeseran di mana elemen ditempatkan pada halaman. 2. Skala gambar untuk resolusi yang berbeda. 3. Mengekspos atau menyembunyikan elemen tertentu pada breakpoints resolusi yang berbeda. 4.3.2. CSS 3 CSS3 merupakan penyederhanaan untuk memberikan porsi yang berbeda dari CSS sebelumnya berdasarkan karakteristik perangkat pengunan atau device yang di gunakan. CSS 3 digunakan untuk membangun resposif atau adaptif desain dari sebuah website, yang tidak tergantung kepada style atau aturan gaya pada sebuah browser tetapi didasarkan porsi aturan ukuran viewport atau layar kerja sebuah perangkat atau device. Elemen CSS 3 pada Responsive Web Design antara lain ; 1. Media Queries adalah salah satu fasilitas yg dimiliki oleh CSS3 (Cascading Style Sheet), dimana halaman web bias menggunakan CSS style yang berbeda bsesuai dengan karakteristik dari perangkat atau device yang digunakan user, dan pada umumnya media queries mendeteksi ukuran jendela browser.

JURNAL TEKNIK INFORMATIKA, JUNI 2015 9

2.

Fluid Grid, atau grid yang fleksibel, konsep ini mengacu pada penggunaan ukuran relatif dengan basis persentase atau ems dibandingkan jenis ukuran absolut seperti pixel atau point. 3. Flexible Image, penggunaan ukuran persen dari 0 sampai 100 untuk image yang ditampilkan di web responsif, selain itu juga tehnik ini berguna untuk mencegah image tampil melebihi elemen containernya. Berikut ini format dasar penulisannya: @media only screen and (min-width : 150px) and (max-width : 780px) { .body { clear: both; margin: 0 auto; width: 90%; font-size: 90%; } Min-width :150px digunakan untuk menampilkan ukuran minimum dari sebuah website dan max-width :780px digunakan untuk menampilkan ukuran maksimun dari sebuah website. Penggunaan nilai % dalam pengaturan di website bermanfaat untuk menyesuaikan secara otomatis ukuran device yang digunakan. 5. PENUTUP  Kesimpulan Dengan pesatnya perkembangan teknologi di dunia ini yang salah satunya karena adanya jaringan internet. Internet itu sendiri adalah sebagai salah satu media informasi yang efektif dan efisien dalam penyampaian informasi yang bisa diakses setiap orang kapan dan dimana saja. Sekarang internet menjadi salah satu kebutuhan masyarakat dalam memperoleh informasi, hal ini didukung oleh perkembangan mobile device atau perangkat bergerak seperti, tablet dan smartphone. Teknologi web 2.0 dapat

memberikan fasilitas komunikasi yang terbuka dan cepat bagi masyarakat umum. Penggunaan HTML5 tersebut merupakan sebuah bahasa markah yang menstrukturkan isi dari World Wide Web, sebuah teknologi utama pada internet. Standar HTML5 menyempurnakan elemenelemen lama yang terdapat pada standar sebelumnya, menambahkan elemen-elemen yang semantik dan menambahkan fitur-fitur baru untuk mendukung pembuatan aplikasi web yang lebih kompleks . Fitur-fitur yang digunakan pada implementasi klien SIP ini antara lain HTML5 Video, Websocket dan WebRTC. Yang kemudian pemggunaan HTML5 dipadukan dengan penggunaan Responsive Web Design, yang merupakan teknik yang digunakan untuk membuat layout web menyesuaikan dengan tampilan device atau perangkat yang digunakan pengunjung web baik ukuran maupun orientasi tampilan secara tegak atau portrait dan tampilan secara mendatar ataupun landscape.  Saran Perkembangan teknologi yang sangat pesat saat ini mendorong internet dan web untuk menjadi standar komunikasi yang terbaru. Dengan diperkenalkannya konsep Web 2.0 dan standar HTML5, web diharapkan dapat menjadi standar komunikasi yang universal. Di sisi lain, Rich Internet Application (RIA) menjadi tren perkembangan teknologi web saat ini. Dengan teknologi tersebut, aplikasi web didesain dengan pendekatan aplikasi desktop, mengedepankan kecepatan akses, kemudahan bagi pengguna, dan keinteraktifan. Dalam mengakses halaman web tentunya kita menggunakan perangkat bergerak seperti tablet ataupun smartphone. Namun memiliki perbedaan, secara tampilan atau desainnya dibandingkan saat diakses menggunakan dekstop komputer atau baik itu PC,notebook,dan laptop. Dikarenakan secara ukuran resolusi perangkat bergerak seperti tablet dan smartphone memiliki resolusi ukuran yang berbeda dengan

JURNAL TEKNIK INFORMATIKA, JUNI 2015 10

dekstop komputer. Ketidak nyamanan yang dirasakan pengguna pada saat mengkases halaman web di perangkat bergerak atau mobile device inilah yang mendorong lahirnya sebuah konsep Responsive Web Design. Sehingga hasil dari adanya konsep web 2.0 dengan standar HTML5 yang dirancang dengan Responsive Web Design diharapkan dapat membantu masyarakat secara umum dan dapat membuat nyaman dalam mengakses halaman web. 6. DAFTAR PUSTAKA Arifin,Tiffany,http://tiffarifin.blogspot.c om/2012/10/html-vshtml5.html, diakses 25 juli 2013, 08.48 WIB. Bertha Sidik, Ir. 2001. Pemprograman Web dengan PHP, Bandung, Informatika.

David, Matthew. HTML5: Designing Rich Internet Applications. Burlington : Focal Press, (2010). Mavrody, Sergei. HTML5 & CSS3: Quick Reference. Chicago : Belisso, (2012). Syachbana dan zulkarnain akib - 2014 perancangan website menggunakan responsivewebdesign/jurnal.sigm a.ac.id/?download=24...websitemenggunakan...web... ejurnal.its.ac.id/index.php/teknik/article/ download/643/377