Segmentasi dan Klasifikasi untuk Tampila

(1)

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

(2)

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

(3)

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 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.

Gambar 2. Proses rendering dokumen HTML  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

 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

(4)

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 Deskripsi

Content Konten utama yang menjadi perhatian penting bagi pengguna

Title Judul sebuah dokumena atau bagian yang ada dalam dokumen

Navigation Elemen halaman yang berhubungan dengan navigasi situs

Logo Gambar dan informasi dekoratif lainnya yang menonjol dalam situs Sidebar Informasi yang diberikan pada halaman

sebagai informasi “tambahan” yang mungkin menarik, tetapi bukan bagian dari tubuh utama teks

Extrainfo Potongan tambahan informasi seperti copyright, disclaimer, help dll Form Bentuk kontrol untuk tujuan seperti

login, registrasi dan survei, dll Decoration Elemen halaman yang murni untuk

tujuan dekoratif dan tidak memberikan informasi aktual

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 4. Rancangan antarmuka website [14] III.2 Sistem Grid

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

(5)

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.

<div class="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> 

Gambar 6. Tampilan segmentasi dalam dokumen HTML III.4 Media Queries

Media query pertama kali disketsakan oleh Håkon 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

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]

Gambar 7. Simple Device Diagram [19] III.5 Mengatur Resolusi Heterogeneous Device di CSS 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]

(6)

/* 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-device-width:1200px){}

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%;}

.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.

DAFTAR PUSTAKA

[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

Vision-based Page Segmentation Algoritm.

[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.

(7)

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.

[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 Wei-Ying 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 Responsiv. 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-2017-will-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/part- 1-a-portrait-of-younger-americans-reading-habits-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/all- articles/what-makes-a-website-design-more-responsive/ (Tanggal akses: 7 Juni 2014)

[19] Anon, 2014. Responsive Web Design and Media

Query. Website :

http://www.gavick.com/magazine/responsive-web-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