Anda di halaman 1dari 8

See

discussions, stats, and author profiles for this publication at: https://www.researchgate.net/publication/263925805

Segmentasi dan Klasifikasi untuk Tampilan


Website dari Perangkat yang Heterogen
Chapter June 2014
DOI: 10.13140/2.1.3256.3521

CITATIONS

READS

350

3 authors, including:
Slamet Riyanto

Al Hafiz Akbar Maulana Siagian

Indonesian Institute of Sciences

Indonesian Institute of Sciences

24 PUBLICATIONS 1 CITATION

4 PUBLICATIONS 0 CITATIONS

SEE PROFILE

SEE PROFILE

Some of the authors of this publication are also working on these related projects:

Data Repository and Analysis Tools View project

All in-text references underlined in blue are linked to publications on ResearchGate,


letting you access and read them immediately.

Available from: Slamet Riyanto


Retrieved on: 20 November 2016

Segmentasi dan Klasifikasi untuk Tampilan


Website dari Perangkat yang Heterogen
Slamet Riyanto1, Hendro Subagyo2, dan Al Hafidz Akbar Maulana S3
1, 2, 3

Pusat Dokumentasi dan Informasi Ilmiah - LIPI

slametriyanto.net@gmail.com1, hendro.subagyo@gmail.com2, alha002@gmail.com3

Abstrak
Secara ideal, sebuah website harus kompatibel dengan berbagai perangkat berbasis dekstop, tablet, dan smartphone.
Mengetahui ukuran layar tablet dan smartphone yang beragam harus menjadi perhatian khusus bagi pengembang web, hal
ini berkaitan dengan informasi yang akan ditampilkan sesuai perangkat yang digunakan untuk mengakses halaman website
tersebut. Banyak framework CSS yang dapat digunakan untuk mengatasi masalah tampilan dari perangkat yang heterogen,
namun hanya berlaku untuk ukuran layar tertentu saja. Paper ini akan membahas cara mengatasi masalah tampilan website
dari perangkat PC/Notebook, Tablet, dan Smaprthpne melalui metode segmentasi. Rancangan web dalam bentuk gambar
diaktualisasikan ke dalam format HTML dan CSS3 dengan bantuan grid dan kolom. Dengan segmentasi dalam bentuk
kolom, kemudian menetapkan resolusi perangkat secara global dalam dokumen CSS maka tampilan website akan
disesuaikan dengan perangkat yang digunakan untuk mengaksesnya.
Kata Kunci : webpage segmentation, responsive web design, media queries, adapting web page

I.

PENDAHULUAN

Akses informasi tidak dibatasi oleh waktu maupun


peralatan yang digunakan untuk mengaksesnya.
Perubahan perilaku orang dalam mencari dan
menemukan informasi sudah berubah secara signifikan.
Pada tahun 2012, Google melakukan studi dan
menemukan bahwa 38% aktifitas tiap hari yang kita
lakukan melalui smartphone. Sedangkan hasil analisa
yang diterbitkan Februari 2014 oleh ComScore
(http://comscore.com) menunjukkan bahwa mayoritas
konsumen melakukan multiscreening untuk mengakses
internet melalui ponsel maupun desktop.
Bahkan International Data Corporation (http://idc.com)
memprediksi perubahan cara akses internet melalui
desktop, tablet, dan smartphone dari tahun 2012-2017.
Dan pada tahun 2015, diprediksi akses internet sebagian
besar melalui smartphone.

Gambar 2. Prediksi terhadap perangkat yang digunakan


untuk akses internet
Dari hasil analisa tersebut, dapat dijadikan referensi bagi
pengembang web untuk membuat strategi dalam
merancang website agar dapat diakses melalui berbagai
media (desktop, tablet, dan smartphone). Hal tersebut
bertujuan untuk memudahkan dan memberi kenyaman
bagi pengguna ketika membaca informasi yang disajikan.

e-Indonesia Initiatives (eII-Forum) 2014, Institut Teknologi Bandung


ICT For Smart Society | Smart System Platform for The Nation

Pada saat perangkat komputer sudah sangat heterogen termasuk smartphone, tablet, laptop, large monitor, dan
wide-screen display - banyak website masih
mengoptimalkan untuk melihat layar desktop/laptop. Hal
ini mungkin karena desktop masih menjadi cara yang
paling dominan untuk mengakses internet. Melihat
dokumen
melalui
perangkat
mobile
biasanya
mengharuskan pengguna untuk melihat dokumen melalui
viewport kecil dari layar perangkat (tablet dan
smaprthone). Para praktisi telah menyadari bahwa versi
standar (optimalisasi desktop) halaman sering mengalami
tampilan tergradasi ke pengguna pada perangkat lain.
Buchanan et al (2001), mengungkapkan bahwa
karakteristik dari perangkat memiliki efek pada
keduanya, bagaimana informasi harus disajikan dan
bagaimana pengguna berinteraksi dengan perangkat
(misal antramuka).
The development of new services has to start from
scratch. The style and logic of the interface may,
however, be based on the closest relatives and
guidelines designed to those. There is no lack of
guidelines: several lists of guidelines for designing Web
pages are presented on books and Web sites. Even
though many of them are based on empirical research, a
part of them, however, are quite ad hoc.[7]
Chinmay Kulkarni and Scot R Klemmer (2011),
menawarkan dua pendekatan dalam menangani perangkat
yang heterogen untuk menampilkan website yaitu: 1)
memilih perangkat lowest-common-denominator dan
membuat sebuah website minimal agar diakses lebih
cepat; 2) menciptakan versi perangkat khusus (atau
aplikasi native) dioptimalkan untuk perangkat mobile
tertentu. Namun perangkat genggam menjadi semakin
beragam dengan kemampuan yang berbeda dan menjadi
kendala. [9]
Sudah banyak pendekatan berbeda yang telah ditawarkan
untuk menangani masalah antarmuka yang efisien dalam
mengakses web pada perangkat layar berukuran kecil
yang meliputi antarmuka pengguna dan penyajian
konten ke pengguna, sumber-sumber informasi yang
handal, dan metode-metode konten web yang
dimodifikasi untuk tampilan. [8]
Para praktisi web sudah mengembangkan teknologi yang
berhubungan dengan antarmuka website. Beberapa
metode yang sudah dikembangkan antara lain: Fixed,

Fluid, Adaptive, dan Responsive. Metode yang


dikembangkan sesuai dengan teknologi yang berkembang
saat itu. Terminologi yang saat ini sedang tren adalah
Responsive Web. Teknologi ini memungkinkan sebuah
website dapat diakses melalui berbagai media
(PC/Desktop, Tablet, dan Smartphone). Tampilan yang
dihasilkan berbeda-beda sesuai dengan peralatan yang
digunakan untuk mengaksesnya. Dengan adanya
teknologi Responsive Web, para pengembang web tidak
perlu mengembangkan aplikasi khusus berbasis mobile
sebagai antarmuka website versi mobile.
Manfaat dari penelitian ini berguna untuk memberikan
solusi terhadap masalah tampilan website dari perangkat
yang heterogen menggunakan metode blok segmentasi
dan klasifikasi sehingga bagian tertentu dapat
ditampilkan maupun disembunyikan berdasarkan
perangkat yang digunakan untuk mengakses website.
Dengan metode ini, dapat meningkatkan kecepatan akses,
menghemat bandwith, dan yang terpenting adalah
kenyamanan membaca informasi yang disajikan tanpa
perlu memperbesar tampilan jika menggunakan
smarpthone.
II. METODOLOGI
Beberapa publikasi ilmiah maupun tulisan teknis yang
berhubungan dengan penelitian ini menjadi referensi dan
acuan agar tidak bertolak belakang dengan penelitian
seebelumnya. Makalah ini bertujuan untuk lebih
menyederhanakan konsep yang sudah dikembangkan
para praktisi dalam menemukan algoritma agar sebuah
website dapat kompatibel dengan berbagai peralalatan
yang heterogen.
Dengan memanfaatkan beberapa CSS Framework yang
sudah ada saat ini, akan semakin mudah dalam
menguraikan blok segmentasi berdasarkan elemen DIV
kemudian ditambahkan Class pada tiap DIV sesuai blok
segementasi. Tiap Class memiliki nilai properti dalam
CSS yang akan menentukan tampilan sebuah website,
dan bergantung pada perangkat yang digunnakan.
II.1 Segmentasi
Dua pendekatan utama dapat diambil untuk masalah
mengidentifikasi segmen dalam sebuah dokumen HTML.
Salah satunya adalah untuk memeriksa pohon DOM
(Document Object Model) dan memilih kelompok node
berdasarkan nama-nama elemen dan hubungan di antara

e-Indonesia Initiatives (eII-Forum) 2014, Institut Teknologi Bandung


ICT For Smart Society | Smart System Platform for The Nation

mereka. Ini menghasilkan segmen berdasarkan kriteria


seperti hubungan antara orang tua, anak, dan elemen
saudara, dan ada atau tidak adanya jenis tertentu node
seperti tabel atau daftar. Teknik umum untuk tata letak
halaman adalah penggunaan tabel dengan masing-masing
sel yang sesuai dengan segmen yang terpisah dari
dokumen, sehingga ini dapat diidentifikasi dengan
memilih isi sel tertentu untuk ditandai sebagai segmen.
Gambar 2. Proses rendering dokumen HTML

Gambar 1. Contoh pohon DOM [8]


Pendekatan lain adalah dengan mempertimbangkan
representasi visual dari dokumen, bukan pohon DOM itu
sendiri dan melakukan analisis geometris untuk
menentukan segmen. Karakteristik seperti position, size,
colour, dan border elemen serta hubungan spasial di
antara mereka. Dalam konteks ini, unsur dikelompokkan
berdasarkan kedekatan spasial mereka bukan lokasi
dalam pohon.

Render : proses rendering, digambarkan dalam


Gambar 2, termasuk sejumlah langkah. Meskipun
secara konseptual ini dianggap proses terpisah,
namaun dalam praktiknya mereka secara efektif
berjalan secara paralel. Ketika memuat sebuah
halaman dari server, bagian halaman yang diterima
oleh klien diurai dan diberikan banyak data yang
sementara. Pengguna biasanya melihat tampilan
halaman diberikan diperbarui beberapa kali sebagai
proses memuat halaman. Ini adalah keuntungan dari
arsitektur mesin rendering, yang meningkatkan
kegunaan ketika dijalankan sebagai bagian dari web
browser standar.

Mendeteksi DIV : Berdasarkan set rincian kotak


diperoleh dari proses rendering, area halaman dibagi
menjadi kotak. Divisi ditempatkan pada interval
sepanjang sumbu x dan y sesuai dengan bagian atas,
bawah, kiri dan kanan masing-masing kotak. Setiap
sel grid ditandai dengan warna yang sesuai dengan
warna latar belakang kotak blok di mana sel berada.
Hal ini memungkinkan algoritma segmentasi untuk
beroperasi berdasarkan sel-sel jaringan bukan piksel,
mengurangi jumlah waktu yang diperlukan untuk
menganalisis output yang diberikan. Grid tersebut
kemudian dianalisis untuk mengidentifikasi daerah
persegi panjang yang memiliki warna latar belakang
yang sama. Tergantung pada tata letak halaman,
mungkin ada set sel jaringan yang berdekatan
dengan warna yang sama yang tidak membentuk
bentuk persegi panjang. Dalam hal ini perlu untuk
memilih divisi yang tepat dari daerah menjadi empat
persegi panjang.

Gambar 3. Sel grid dengan beberapa kemungkinan


pengaturan daerah

e-Indonesia Initiatives (eII-Forum) 2014, Institut Teknologi Bandung


ICT For Smart Society | Smart System Platform for The Nation

Posisi Float dan Absolute : CSS menyediakan dua


sifat yang memungkinkan konten untuk ditempatkan
di luar arus teks utama: float dan position.
Jika elemen memiliki set properti float ke kiri
atau kanan, maka semua konten dalam elemen akan
berada dalam kotak yang ditempatkan terhadap sisi
halaman, dan teks di luar elemen akan mengalir di
sekitarnya. Demikian pula, jika properti position
diatur fixed atau absolute, dan koordinat juga
ditentukan untuk elemen, maka isi akan ditampilkan

di lokasi tersebut pada halaman, dan ditumpangkan


di atas konten lainnya.
II.3 Klasifikasi
Proses klasifikasi memberikan penugasan sebuah class
pada setiap segmen dalam dokumen yang menunjukkan
jenis informasi yang dikandungnya. Nama class yang
dipilih untuk segmen tertentu bergantung pada nilai-nilai
varibel fitur yang terkait dengan segmen. Setiap variabel
fitur merupakan potongan informasi yang berkaitan
dengan penampilan segmen, dan berasal dari kedua
struktur DOM dan render visual dari semua node dalam
segmen.
Tabel 1. Membuat klasifikasi
Klasifikasi
Content
Title
Navigation
Logo
Sidebar

Extrainfo
Form
Decoration

Deskripsi
Konten utama yang menjadi perhatian
penting bagi pengguna
Judul sebuah dokumena atau bagian
yang ada dalam dokumen
Elemen halaman yang berhubungan
dengan navigasi situs
Gambar dan informasi dekoratif
lainnya yang menonjol dalam situs
Informasi yang diberikan pada halaman
sebagai informasi tambahan yang
mungkin menarik, tetapi bukan bagian
dari tubuh utama teks
Potongan tambahan informasi seperti
copyright, disclaimer, help dll
Bentuk kontrol untuk tujuan seperti
login, registrasi dan survei, dll
Elemen halaman yang murni untuk
tujuan dekoratif dan tidak memberikan
informasi aktual

Gambar 4. Rancangan antarmuka website [14]


III.2 Sistem Grid
Dalam dokumen HTML tidak tersedia mistar maupun
garis bantu untuk membagi rancangan web dalam kolomkolom. Beberapa CSS Framework menggunakan sistem
grid sebagai alat bantu untuk membagi rancangan web
sesuai jumlah kolom.

III. IMPLEMENTASI
Berdasarkan metodologi yang telah digunakan, akan
memudahkan dalam mengimplementasikan rancangan
yang dibuat dan dilakukan pengujian terhadap beberapa
peralatan yang heterogen.
III.1 Prototype
Prototipe bertujuan untuk memudahkan dalam
pembuatan bentuk website yang sesungguhnya, termasuk
pengelompokkan blok segmentasi (DIV). Rancangan
interface harus dapat diterjemahkan ke dalam dokumen
HTML dan pemrograman web lainnya.

Gambar 5. Sistem Grid untuk memudahkan segmentasi

e-Indonesia Initiatives (eII-Forum) 2014, Institut Teknologi Bandung


ICT For Smart Society | Smart System Platform for The Nation

III.3 Proses Segmentasi


Untuk memudahkan dalam proses segmentasi, kami
menggunakan Bootstrap sebagai CSS Framework. Meski
begitu, pemilihan framework ini bukan menjadi hal yang
absolut, bisa menggunakan framework lain karena
framework hanya sekadar membantu pekerjaan agar lebih
cepat dan efisien. Framework masih sangat terbatas
dalam menentukan blok segementasi, masih perlu
ditambahkan Class agar hasilnya lebih optimal.
Pembagian blok segmentasi lebih mudah menggunakan
elemen <DIV>, dibandingkan <TABLE>. Berikut ini
potongan script HTML, yang menggunakan huruf tebal
adalah penambahan Class sendiri.

pada Media Queries dan skema lain untuk mendukung


berbagai perangkat. Rancangan kerja pertama kali untuk
Media Queries dipublikasikan tahun 2001, dan menjadi
rekomentasi W3C pada tahun 2012 setelah browser
menambahkan dukungan. [21]
Saat ini, Media Queries sangat bermanfaat terutama
untuk menangani masalah tampilan website dari berbagai
peralatan yang heterogen. Banyaknya perangkat dan
variasi ukuran layar, menjadikan Media Queries sebagai
faktor utama dalam mendeteksi perangkat dan
memprosesnya sebelum menampilkan halaman website.
Untuk mengatasi hal tersebut, Stephanie Riger dan Metal
Toad's menguraikan berbagai produk smarphone dan
tablet dalam sebuah diagram yang dinamai Simple
Device Diagram. [19]

<div class="container"> <!-- Start Container -->


<div class="col-md-7 border-all">
<div class="color-cyan"><img src="">
<div class="strip putih">Daftar .... </div>
<div class="intro">Vaniti Fair .... </div>
<div class="clearfix"></div></div>
</div>
<div class="col-md-3">KOLOM 3</div>
<div class="col-md-2">KOLOM 2</div>
<div class="col-md-4">KOLOM 4 kiri</div>
<div class="col-md-4">KOLOM 4 tengah</div>
<div class="col-md-4">KOLOM 4 kanan</div>
<div class="col-md-12">KOLOM 12</div>
<div class="col-md-12">FOOTER</div>
</div> <!-- End Container -->

Gambar 7. Simple Device Diagram [19]


III.5 Mengatur Resolusi Heterogeneous Device di CSS

Gambar 6. Tampilan segmentasi dalam dokumen HTML

CSS dirancang terutama untuk memungkinkan


pemisahan konten dokumen dari presentasi dokumen,
termasuk unsur-unsur seperti tata letak, warna, dan huruf.
Pemisahan ini dapat meningkatkan aksesibilitas isi,
memberikan lebih banyak fleksibilitas dan kontrol dalam
menyajikan karakteristik, memungkinkan beberapa
halaman untuk berbagai format, serta mengurangi
kompleksitas dan pengulangan dalam konten yang
terstruktur. [20]

III.4 Media Queries


Media query pertama kali disketsakan oleh Hkon Wium
Lie yang diusulkan untuk CSS awal tahun 1994, namun
bukan menjadi bagian dari CSS1.
HTML4
merekomendasikan sejak tahun 1997 yang menunjukkan
contoh bagaimana Media Queries dapat ditambahkan
pada masa depan. Pada tahun 2000, W3C mulai bekerja

Dengan mengatur media queries dalam dokumen CSS,


maka permasalahan tampilan website yang diakses dari
berbagai peralatan dapat diatasi sehingga informasi yang
diminta akan ditampilkan sesuai peralatan yang
digunakan untuk mengakses halaman website.

e-Indonesia Initiatives (eII-Forum) 2014, Institut Teknologi Bandung


ICT For Smart Society | Smart System Platform for The Nation

/* Smartphones (portrait) ----------- */


@media
only
screen
and
(max-device-width
:320px){}
/* Smartphones (portrait and landscape) ---------- */
@media only screen and (min-device-width :321px)
and (max-device-width :480px){}
/* Smartphones (600 x 400)------ */
@media only screen and (min-device-width :481px)
and (max-device-width :767px){}
/* Smartphones (800 x 600)----- */
@media only screen and (min-device-width:768px)
and (max-device-width:991px){}
/* Desktop, Netbook and Tablet (minimal 1024 x
768)----- */
@media only screen and (min-device-width:992px)
and (max-device-width:1199px){}
/*
Desktops
&
laptops
Wide
Screen
High
Resolution (minimal 1280 x 600)----- */
@media
only
screen
and
(min-devicewidth:1200px){}

.no-bullet
li:after{content:
"
\2022
";color: #8f8a8a;padding: 5px;}
.no-bullet
li{list-style-type:
none;display: inline;}
.putih{font-size:140%; line-height: 110%;}
.sans{font-size: 150%;}

}
VI.

KESIMPULAN

Penelitian ini telah diujicobakan untuk pembuatan


website berbasi PC/Desktop, Tablet, dan Smaprthone
yang diawali dengan konsep dan pembuatan prototipe
menggunakan Adobe Photoshop kemudian hasil
rancangan dalam bentuk gambar tersebut diterjemahkan
ke dalam bahasa pemrograman HTML, PHP, dan CSS3
dengan metode segmentasi.
Meski tanpa bantuan CSS Framework, proses pembuatan
website akan semakin mudah dan lebih cepat jika
menggunakan metode segmentasi berdasarkan elemen
DIV dan menambahkan Class sendiri.
REFERENSI
[1] Aruljothi, M.S., Sivaranjani, S. & Sivakumari. Web
Page Segmentation for Small Screen Device
Using Tag Path Clustering Approach.
International Journal on Computer Science and
Engineering (IJCSE) 5(7), 2013. pp. 617-624.
[2] Cai, D., Yu, S., & Wen , J. 2003. VIPS: a Visionbased Page Segmentation Algoritm.

Gambar 8. Konsep Responsive Web Design [19]


Dengan melakukan pengaturan resolusi peralatan yang
heterogen, konten akan diatur sesuai dengan nama Class
yang telah ditentukan sebelumnya. Selain dapat mengatur
kembali nilai properti pada setiap elemen, nama Class
dapat dijadikan untuk mengatur segmen tersebut akan
ditampilkan atau disembunyikan dengan mengatur
display : none; pada dokumen CSS. Berikut
contoh potongan script untuk mengatur tampilan pada
smarphone.
/* Smartphones (portrait) ----- */
@media only screen and (max-device-width :320px)
{
.headlines-more{font-size: 140%;}
.headlines-panel{font-size: 150%;}
.intro{font-size: 120%;}
.judul.stories{font-size: 140%;}
.judul{font-size:130%;
font-family:
'PT
Sans Narrow'; line-height: 100%;}
.list-group-item{font-size: 130%;}

[3] Chaudhury, Santanu and Jindal, Megha and Roy,


Sumantra Dutta. Model-Guided Segmentation
and Layout Labelling of Document Images
using a Hierarchical Conditional Random Field.
Lecture Notes in Computer Science, Springer
Berlin Heidelberg, 2009. pp. 1-6.
[4] Chen, Yu and Xie, Xing and Ma, Wei-ying. 2005.
Adapting Web Pages for Small-Screen Devices.
IEEE Internet Computing, Volume 9 Issue 1,
January 2005 pp. 50-56. ACM New York, NY,
USA.
[5] Hattori, Gen and Hoashi, Keiichiro and Matsumoto,
Kazunori and Sugaya, Fumiaki. 2009. Robust
Web Page Segmentation for Mobile Terminal
Using Content-Distances and Page Layout
Information. Proceedings of the 16th

e-Indonesia Initiatives (eII-Forum) 2014, Institut Teknologi Bandung


ICT For Smart Society | Smart System Platform for The Nation

international conference on World Wide Web.


pp. 361-370. ACM New York, NY, USA.
[6] V Kalaivani and K Rajkumar. 2012. Reappearance
Layout based Web Page Segmentation for Small
Screen Devices. International Journal of
Computer Applications 49(20):1-8, July 2012.
Published by Foundation of Computer Science,
New York, USA.
[7] Lari Krkkinen. 2002. Designing for small display
screens. Proceedings of the second Nordic
conference on Human-computer interaction.
ACM New York, NY, USA 2002. pages 227 230
[8] Kelly, P, 2003. Segmentation and Classification of
HTML Documents for Display on Small Screen
Devices, October, pp. 1-77.
[9] Kulkarni, C.E. & Klemmer, S. R.. 2011.
Automatically adapting web pages to
heterogeneous devices. Proceedings of the 2011
annual conference extended abstracts on Human
factors in computing systems - CHI EA '11, p.
1573.
[10] L. Gordon Crovitz. 2012. Information Age:
Brainwashing in the Digital Era. Wall Street
Journal, Eastern edition. Dow Jones & Company
Inc.
[11] Mutula, Stephen M., 2013. Editorial Feature
Information Access / Accessibility in a Digital
Environment. African Journal of Library,
Archives & Information Science;Apr2013, Vol.
23 Issue 1, p1
[12] Ruihua Song, Haifeng Liu, Ji-Rong Wen, and WeiYing Ma. 2004. Learning important models for
web page blocks based on layout and content
analysis. SIGKDD Explor. Newsl. 6, 2
(December
2004),
14-23.
DOI=10.1145/1046456.1046459
http://doi.acm.org/10.1145/1046456.1046459
[13] Shefali Singhal and Neha Garg. Article: Hybrid
Web-page Segmentation and Block Extraction
for Small Screen Terminals. IJCA Proceedings
on 4th International IT Summit Confluence

2013 - The Next Generation Information


Technology Summit Confluence 2013(2):12-15,
January 2014. Foundation of Computer Science,
New York, USA.
[14] Slamet Riyanto, 2014. Kupas Tuntas Web
Responsif. Jakarta: Elexmedia Komputindo
[15] Anon, 2014. IDC: 87% Of Connected Devices Sales
By 2017 Will Be Tablets And Smartphones Forbes.
http://www.forbes.com/sites/louiscolumbus/201
3/09/12/idc-87-of-connected-devices-by-2017will-be-tablets-and-smartphones/ (Akses : 5 Juni
2014)
[16] Anon, 2014. Most will access Internet via mobile
devices by 2015, IDC says - Computerworld.
http://www.computerworld.com/s/article/92199
32/Most_will_access_Internet_via_mobile_devi
ces_by_2015_IDC_says (Tanggal Akses: 5 Juni
2014)
[17] Anon, 2014. Part 1: A portrait of younger
Americans reading habits and technology use |
Pew
Internet
Libraries.
Website:
http://libraries.pewinternet.org/2013/06/25/part1-a-portrait-of-younger-americans-readinghabits-and-technology-use/#fn-2152-8 (Tanggal
akses: 5 Juni 2014)
[18] Anon, 2014. What Makes a Website Design More
Responsive and Why is it so Important?.
Website:
http://www.downgraf.com/allarticles/what-makes-a-website-design-moreresponsive/ (Tanggal akses: 7 Juni 2014)
[19] Anon, 2014. Responsive Web Design and Media
Query.
Website
:
http://www.gavick.com/magazine/responsiveweb-design-and-media-query.html
(Tanggal
akses : 7 Juni 2014)
[20] Anon,
2014.
Cascading
Style
Sheet.
http://en.wikipedia.org/wiki/Cascading_Style_S
heets (Tanggal akses: 8 Juni 2014)
[21] Anon,
2014.
Media
Queries.
http://en.wikipedia.org/wiki/Media_queries
(Tanggal akses 8 Juni 2014)

e-Indonesia Initiatives (eII-Forum) 2014, Institut Teknologi Bandung


ICT For Smart Society | Smart System Platform for The Nation