{"'"""""-... i~~~::~::~"""7

r=='"""""'=-"'=~~..,, ~~-.,~·

{"'"""""- .. .

i~ ~: ~: ~" "7

PROTOTYPE WEBRESPONSivE.DE~JbN PADA UIN SYARIF HIDAYATULLAH JAKARTA MENGGUNAKAN FRAMEWORK BOOTSTRAP Skripsi Sebagai salah satu syarat memperoleh gelar Sarjana Komputer

FADLANREZA

108091000065

PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UIN SYARIF HIDAYATULLAH JAKARTA

2014 MI 1435 H

PROTOTYPE WEB RESPONSIVE DESIGN PADA UIN SYARIF HIDAYATULLAH JAKARTA MENGGUNAKAN FRAMEWORK BOOTSTRAP Skripsi Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer

Oleh:

FADLANREZA

108091000065

PROGRAM STUD! TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UIN SYARIF HIDAYATULLAH JAKARTA

2014 M/1435 H Tgl

LEMBARPENGESAHAN WEB RESPONSIVE DESIGN UNTUK PERGURUAN TINGGI MENGGUNAKAN FRAMEWORK BOOTSTRAP (Studi Kasus : UIN Syarif Hidayatullah Jakarta)

Skripsi Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer Fakultas Sains dan Teknologi UIN SyarifHidayatullah Jakarta

Oleh: FADLANREZA NIM : 108091000065

Menyetujui, Pembimbing I,

Pembimbing II,

Viva Arifin MMS NIP. 19730810 200604 001

Arini, MT NIP. 197601312009012001

Mengetahui, Ketua Program tudi Teknik Informatika

Nurh

ati P . D

1'TTP 1o;;orn1;; 1 00001 ,, oo-,

PERNYATAAN

DENGAN INI SAYA MENYATAKAN BAHWA SKRIPSI !NI BENARBENAR HASIL KARYA SENDIRI YANG BELUM PERNAH DIAJUKAN SEBAGAI SKRIPSI ATAU KARYA ILMIAH PADA PERGURUAN TINGGI ATAU LEMBAGA MANAPUN.

Jakaita, September 2014

Fadlan Reza

108091000065

Fadhm Reza, Prototype Web Responsive Design Pada VIN Syarif Hidayatullah Jakarta Menggunakan Framework Bootstrap, dibimbing oleh Viva Arifin, MMSI dan Arini, MT.

ABSTRAK Angka akses website VIN Syarif Hidayatullah Jakarta dengan menggunakan perangkat mobile mencapai 30% dari total kunjungan dan dari 59 jenis resolusi layar, 42 adalah perangkat mobile selama I Januari - 17 Februari 2014 (Data Primer PVSTIPANDA, 2014). Secara global angka akses internet menggunakan perangkat mobile meningkat, menurut Morgan Stanley Research dalam laporan Global The Mobile Internet Report, 2009, pada 2014 diprediksi akses internet dengan perangkat mobile akan melampaui akses internet dengan perangkat mobile. Pada 2012 menurut HIS iSuppli Research angka penjualan perangkat desktop mengalami penurunan sebesar 1,2 % dibanding tahun 2011, dampak dari meningkatnya jumlah penjualan perangkat mobile. Hal ini menimbulkan pertanyaan pada apakah website VIN SyarifHidayatullah Jakarta pada 2014 sudah siap menghadapai akses dari perangkat mobile yang begitu beragam? Menurut Ethan Marcotte, semakin banyaknya perangkat yang muncul dengan berbagai ukuran, maka sebuah situs perlu mengenali ukuran perangkat pengguna (Marcotte, 2011: 8). Responsive web design adalah pendekatan desain webite yang dapat beradaptasi dengan masalah pada web browser dan perangkat keras yang menjalankannya untuk menciptakan respon terhadap kebutuhan pengguna (Marcotte, 2011: 9). Responsive web design terdiri atas 3 komponen yaitu: tata letak fleksibel berbasis grid, gambar dan media fleksibel, media queries. Pada penulisan skripsi ini penulis menggunakan metodologi Web Site Design Method (WSDM) dalam pembuatan website VIN Syarif Hidayatullah Jakarta dengan tahapan proses pernyataan misi dengan pengumpulan data berupa observasi dan wawancara, pemodelan pengguna, desain konseptual, desain implementasi, dan implementasi. Hasil proses pembuatan adalah website VIN Syarif Hidayatullah Jakarta dengan tampilan baru yang mengadopsi teknologi responsive web design, sehingga bisa beradaptasi pada setiap ukuran resolusi layar yang berbeda-beda baik dengan perangkat mobile maupun desktop.

Kata kunci

: Website, Responsive Web Design, Resolusi Layar, Mobile, Web Site Design Method (WSDM). : 26 (1998 -2013) Daftar Pustaka Jumlah Halaman : 5 BAB + 116 Halaman + 33 Gambar + 13 Tabel + 6 Lampiran

Faizal, Fariz Yuliono, Hafizhan Irawan, Ilham Tri Saputra, Muchtar Aham, Muhammad Ardiansyah, Priyangga, Rahmad Hamidi, Rizqon Syauqi, dan Eko Suganda. Language Theory & Automata Band. 6.

Teman-teman Muhammad Fajar, Vina Alfiani, Aji Prastio Wibowo, Indah Permata Sari, Ninda Firstri Oktidila, dan Adina Siti Maryam Talogo atas do'a, dukungan, dan semangatnya.

7.

Rekan-rekan

PUSTIPANDA

UIN

Syarif Hidayatullah

Jakarta

atas

kesempatan riset dan data penelitiannya. 8.

Teman-teman Teknik Informatika C 2008 (Ticcer) dan Teman Teknik Informatika Multimedia 2008.

9.

Keluarga Besar Dapur Seni atas ilmu dan pengalaman bermusiknya. Temanteman band dan lainnya.

I 0. Selumh pihak yang telah membantu meski tak penulis sebutkan khusus.

Terima kasih banyak atas do'a, bantuan, dan dukungannya semoga Allah SWT membalas dengan segala kebaikan dan keberkahan. Mohon maaf atas segala kekurangan yang masih terdapat dalam skripsi ini. Demikian, penulis berharap skripsi ini dapat memberikan manfaat. Untuk kritik dan saran dapat menghubungi penulis melalui email [email protected].

Jakarta, September 2014

Fadlan Reza

DAFTARISI Halaman HALAMAN SAMPUL ............................................................................ . HALAMAN JUDUL ................................................................................

ii

HALAMAN PENGESAHAN ..................................................................

iii

HALAMAN PENGESAHAN UJIAN .....................................................

iv

HALAMAN PERNYATAAN ..................................................................

v

ABSTRAK ...............................................................................................

vi

KATA PENGANTAR ..............................................................................

vii

DAFTAR ISI ............................................................................................

ix

DAFTAR GAMBAR ..................................................................................

xii

DAFTAR TABEL ....................................................................................

xiv

BAB 1 PENDAHULUAN ......................................................................

1

I. I Latar Belakang .....................................................................

I

1.2 Rumusan Masaiah . .. ...... .. .... ...... ..... ..... .. ...... ... ....... .. .............

3

I .3 Batasan Masai ah .. .. ....... .. ...... .... .. .. .. ...... .. .... .. ............. .... ..... ..

4

I .4 Tujuan Penelitian ..................................................................

4

1.5 Manfaat Penelitian ................................................................

5

1.6 Sistematika Penelitian ...........................................................

6

BAB Il LANDASAN TEORI .................................................................

7

2. I Responsive Web Design .........................................................

7

2. l. l Tata Letak Fleksibel Berbasis Grid ..............................

7

2. l.2 Gambar dan Media Fleksibel .......................................

8

2.1.3 Media Queries .............................................................

9

2.2 Framework Responsive Web Design ......................................

10

2.2. l Bootstrap .....................................................................

11

2.2.2 Foundation ..................................................................

11

2.2.3 Skeleton ......................................................................

12

2.2.4 Perbandingan 3 Framework Responsive Web Design....

13

2.2.5 Alasan Menggunakan Framework Bootstrap ................

15

2.3 Desain Web ...........................................................................

15

2.3.1 HyperText Markup Language 5 (HTML5) ...................

15

2.3.2 Cascading Style Sheet 3 (CSS3) ..................................

16

2.4 Usabilitas ..............................................................................

17

2.5 Studi Pustaka .........................................................................

19

2.6 Web Site Design Method (WSDM)........................................

19

2. 7 Unified Modeling Language (UML) ......................................

25

BAB m METODOLOGI PENELITIAN ..............................................

27

3 .1 Metode Pengumpulan Data ..... .. .... ....... .. ... .. ..... .. .. .. .. ... .. ......

27

3.1.1 Data Primer...............................................................

27

3.1.1.1 Wawancara ....................................................

27

3.1.1.2 Observasi ......................................................

27

3.1.2 Data Sekunder ..........................................................

28

3.1.2.1 Studi Pustaka .................................................

28

3.2 Metode Web Site Design Method (WSDM) ........................

29

3.2.1 Pernyataan Misi .........................................................

29

3.2.2 Pemodelan Pengguna ................................................

30

3.2.3 Desain Konseptual .....................................................

30

3.2.3. l Pemodelan lnfonnasi .....................................

31

3.2.3.2 Pemodelan Fungsi .........................................

3I

3.2.3.3 Desain Navigasi ............................................

31

3.2.4 Desain Implementasi .................................................

32

3.2.4. I Desain Halaman ............................................

32

3.2.4.2 Desain Presentasi ..........................................

33

3.2.5 Implementasi .............................................................

34

3.2.6 Pengujian ..................................................................

34

3.3 Alasan Menggunakan WSDM .............................................

35

3.4 Kerangka Berfikir ...............................................................

36

BAB IV HASIL DAN PEMBAHASAN ••••••••••••••.••••••.•••.•...•..••••••••••••••••

37

4. I Web Site Design Method (WSDM) ......................................

37

4.1.1 Pemyataan Misi .........................................................

37

4.1.2 Pemodelan Pengguna ................................................

45

4.1.2.1 Klasifikasi Pengguna ...................................

45

4.1.2.2 Karakterisasi Pengguna ...............................

54

4.1.3 Desain Konseptual .....................................................

55

4.1.3.1 Pemodelan Informasi ..................................

55

4.1.3.2 Pemodelan Fungsi .......................................

56

4.1.3.3 Desain Navigasi ..........................................

61

4.1.4 Desain Implementasi .................................................

63

4.1.4.1 Desain Halaman ..........................................

63

4.1.4.2 Desain Presentasi ........................................

75

4.1.5 Implementasi .............................................................

80

4.3 Pengujian ............................................................................

83

4.4 Perbandingan Website UIN Syarif Hidayatullah Sebelum dan Sesudah Menggunakan Teknologi Responsive Web Design.........

86

BAB V PENUfUP ..................................................................................

87

5.1 Kesimpulan ...........................................................................

87

5.2 Saran .... ....... ..... .. .... ...... ...... .. ..... .... ......... ..... ....... ..... ...... ....... .

88

DAFTAR PUSTAKA ...............................................................................

89

LAMPIRAN .............................................................................................

92

DAFTAR TABEL

Halaman Tabel 2.1 Perbandingan 3 Framework Responsive Web Design ..................

13

Tabel 4.1 Resolusi Layar Pengguna Website VIN SyarifHidayatullah Jakarta .......................................................................................................

38

Tabel 4.2 Browser Pengguna Website UIN SyarifHidayatullah Jakarta .....

39

Tabel 4.3 Jenis Perangkat Mobile Pengguna Website UIN SyarifHidayatullah Jakarta .......................................................................................................

41

Tabel 4.4 Durasi Pengguna Website VIN Syarif Hidayatullah Jakarta.........

43

Tabel 4.5 Pemyataan Misi Website VIN Syarif Hidayatullah Jakarta ..........

45

Tabel 4.6 Deskripsi Use Case Akses Website..............................................

46

Tabel 4. 7 Deskripsi Use Case Login Administrator.....................................

47

Tabel 4.8 Deskripsi Use Case Manage Berita .............................................

47

Tabel 4.9 Deskripsi Use Case Manage Artikel............................................

48

Tabel 4.10 Deskripsi Use Case Manage Kolom Rektor...............................

49

Tabel 4.11 Deskripsi Use Case Manage Halaman Kategori ........................

49

Tabel 4.12 Pengujian Website.....................................................................

84

BABI

PENDAHULUAN

1.1

Latar Belalumg Vniversitas Islam Negeri Syarif Hidayatullah Jakarta sebagai lembaga

pendidikan tinggi dengan arah pengembangan menuju universitas kelas dunia sebagaimana ditulis dalam Buku Pedoman Akademik tahun 2010-2011, VIN Syarif Hidayatullah Jakarta menjadi jendela keunggulan akademis Islam Indonesia (window of academic excellence of Islam in Indonesia) dan barometer perkembangan,

pembelajaran,

penelitian,

dam

kerja-kerja

sosial

yang

diselenggarakan kaum Muslim Indonesia dalam berbagai bidang ilmu (Tim Penyusun Pedoman Akademik, 2010: 14). Hal ini perlu ditunjang media informasi yang menerapkan teknologi terbam sebagai jendela awal pencarian informasi mengenai VIN Syarif Hidayatullah di dunia internet. Website sebagai media informasi yang penting guna mendukung kelancaran informasi dan komunikasi antara sivitas akademika dengan seluruh unit yang ada di lingkungan VIN Syarif Hidayatullah Jakarta (Tim Penyusun Pedoman Akademik, 20 I 0: 23). Hasil observasi yang dilakukan pada website VIN Syarif Hidayatullah Jakarta, bahwa pada 1 Januari 2014 sampai 17 Februari 2014 website belum menerapkan teknologi responsive web design. Data statistik kunjungan menunjukkan dari 100% kunjungan, 30% sudah mengakses website VIN Syarif Hidayatullah Jakarta dengan perangkat mobile, dari angka 30% terdiri dari 143

2

jenis perangkat mobile dari total 4 77 jenis perangkat yang digunakan untuk mengakses

(Data Primer PUSTIPANDA Statistik

Website

VIN

Syarif

Hidayatullah Jakarta). Fenomena bertambahnya jenis perangkat keras dengan beraneka variasi ukuran resolusi layar serta perilaku pengguna yang cendemng akan lebih banyak menggunakan internet secara mobile berdampak pada masalah mengenai faktor usabilitas dari sebuah produk digital dalam penelitian ini pada masalah website. Semakin banyaknya perangkat yang muncul dengan berbagai ukuran, maka sebuah situs perlu mengenali ukuran perangkat pengguna (Marcotte, 2011: 8). Dalam

bukunya Responsive

Web

Design

pada 2011,

Ethan

Macotte

memperkenalkan teknologi Responsive Web Design sebagai solusi untuk bagaimana membuat sebuah website mampu untuk mengenali ukuran perangkat pengguna dan membuat website dapat memberikan tampilan yang sesuai dengan ukuran perangkat pengguna, tanpa mernsak tampilan website tersebut, sehingga tingkat usabilitas pada jenis-jenis perangkat tetap maksimal. Penulisan skripsi ini menggunakan framework Bootstrap untuk perancangan tampilan website UIN Syarif Hidayatullah Jakarta, Bootstrap dikembangkan oleh Twitter. Bootstrap menjadi framework responsive web design terpopuler dengan menjadi proyek yang paling banyak dilihat di fornm GitHub sebanyak 33.000 anggota forum. Dalam penerapannya Bootstrap membagi kategori ukuran resolusi perangkat ke dalam 4 kategori, yaitu: large devices, medium devices, small devices, dan extra small devices.

6

1.6

Sistematika Penelitian Dalam penyusunan tugas akhir ini, penulis menyajikan badasan dalam

lima pokok bahasan, yang secara singkat akan diuraikan sebagai berikut :

BABI

PENDAIDJLUAN Bab ini akan diuraikan tentang latar belakang, perumusan masalah, batasan masalah, tujuan penelitian, manfaat penelitian, dan sistematika penulisan.

BABil

LANDASAN TEORJ: Bab ini akan diuraikan mengenai landasan teori yang digunakan dalam pembahasan penulisan skripsi ini dan sumber landasan teori tersebut.

BABilI

METODOLOGI PENELITIAN Bab ini berisikan metode dan tahap-tahap yang akan digunakan dalam penelitian tugas akhir atau skripsi.

BAB IV

HASIL DAN PEMBAHASAN Bab ini akan diuraikan dan membahas proses perancangan dan pengembangan antarmuka (user inteiface) website dengan teknologi

responsive web design yang meliputi

hasil dari metodologi penelitian yang telah dilakukan.

BABV

KESIMPULAN DAN SARAN Bab ini akan disajikan kesimpulan dan saran-saran yang di angkat dalam penelitian berdasarkan pembahasan pada babbab sebelumnya.

BABU LANDASAN TEORI

2.1

Responsive Web Design Responsive web design adalah pendekatan desain web yang dapat

beradaptasi dengan masalah pada web browser dan perangkat keras yang menjalankannya untuk menciptakan respon terhadap kebutuhan pengguna (Marcotte, 2011: 9). Google perusahaan yang bergerak di bidang teknologi dan mesin pencarian infonnasi di internet dalam portal Google Developer mengenai "Building Mobile-Optimized Websites" merekomendasikan langsung responsive web design bagi pengembang website untuk dapat melayani kebutuhan para

pengguna agar optimal pada setiap jenis perangkat dekstop maupun mobile. Responsive web design memiliki satu aspek dimana hanya diperlukan satu website

untuk berbagai perangkat dan tetap memberikan user-experience yang baik. Ada 3 elemen utama dalam teknologi responsive web design, yaitu: a. Tata Letak Fleksibel Berbasis Grid b. Gambar dan Media Fleksibel

c. Media Queries

2.1.1

Tata Letak Fleksibel Berbasis Grid Tata letak berbasis grid merupakan salah satu pilar penting dalam

desain responsif. Tata letak responsif adalah menggunakan CSS untuk posisi dan untuk meletakkan margin dan spasi untuk menerapkan berbagai jenis tata letak

8

web dengan cara baru. Tata letak dan ukuran teks biasanya dinyatakan dalam pixel tata letak berbasis presentase dan ukuran berbasis "em". Dengan mendasarkan ukuran pada teks, lebar, dan margin presentase atau di "em" dengan unit pengukuran berdasarkan ukuran titikfont, ukuran yang dirubah adalah ukuran tetap menjadi ukuran relatif untuk mencapai grid yang fleksibel dan sistem ukuran teks, dengan rumus perhitungan "em"

Target + Konteks = Hasil (Marcotte,2011 :20) Contoh: Konteks normal ukuran/ont "body" adalah 16 piksel. Jika perancang menetapkan bahwa "HI" harus 24 piksel dapat dihitung menjadi: 24+16=1.5 maka hasil yang digunakan dalam kode CSS :

hl{ Font size: 1.5em; }

2.1.2

Gambar Dan Media Fleksibel Menurut Ethan Marcotte dalam bukunya Responsive Web Design

salah satu masalah terbesar yang dapat dijawab oleh responsive web design adalah penggunaan gambar dalam website. Ada beberapa teknik yang dapat digunakan dalam mengatur ukuran gambar secara proporsional. Salah satu yang paling populer yang ditulis Ethan Macotte dalam artikelnya tentang fluid images adalah

9

penggunaan "max-width" dalam CSS, teknik ini pertama kali diuji coba oleh Richard Rutter. Saat aturan tentang ukuran gambar ini belum ada, pada umumya setiap gambar akan memuat dalam ukuran aslinya, kecuali area tampilan menjadi lebih sempit dari lebar asli gambar itu. Lebar maksimum gambar diatur ke 100% dari lebar layar atau browser, sehingga ketika itu 100% menjadi lebih sempit maka ukuran gambar tidak akan berubah. Gagasan dibalik fluid-image adalah bahwa Anda memberikan gambar pada ukuran maksimum yang akan digunakan. Anda tidak mendeklarasikan tinggi dan lebar dalam kode Anda, tetapi biarkan browser mengubah ukuran gambar yang diperlukan saat menggunakan CSS untuk

membimbing ukuran size secara relatif (Knight, 2012: 13).

2.1.3

Media Queries Media query adalah mekanisme untuk mengidentifikasi jenis media,

karakteristik fisik perangkat, dan browser yang digunakan (Marcotte, 2011: 74). Perangkat yang sudah mendukung CSS3 akan mendukung fitur media query, jadi memanggil media query untuk mendeteksi target ukuran perangkat. Fitur barn pada CSS3 juga mencakup orientasi (potret dan landscape), dengan mendeteksi ukuran resolusi layar sehingga dapat membuat beberapa style sheet serta perubahan tata letak dasar didefiniskan sesuai dengan rentang lebar bahkan untuk orientasi landscape dan potret. Contoh penggunaan media query:

10

/* Smartphones (portrait and landscape) */ @media only screen 320px) and (min-device-width 480px) and {max-device-width /* Styles */ )

/* Smartphones (landscape) ----------- */ @media only screen and (min-width : 32lpx) I* Styles */

{

)

/* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */

Secara umum media query telah didukung banyak browser (Firefox 3.6+, Safari 4+, Chrome 4+, Opera 9.5+, iOS Safari 3.2+, Opera Mobile IO+, Android 2.1+,

dan Internet Explorer 9+) (Frain, 2012: 35).

2.2

Framework Responsive Web Design Framework adalah kumpulan perintah atau fungsi dasar yang membentuk

aturan-aturan tertentu dan saling berinteraksi satu sama lain sehingga dalam pembuatan aplikasi website, kita harus mengikuti aturan dari framework tersebut (Wardana, 2010: 3). Dalam pemrograman tampilan webite dengan teknologi responsive web design, telah dikembangkan yaitu Bootstrap yang dikembangkan oleh Twitter

Inc., Zurb Foundation yang dikembangkan oleh Zurb, Skeleton dan lainnya. Sebuah framework selain menyediakan lingkungan pengembangan sendiri juga menyediakan berbagai macam fungsi siap pakai yang bisa digunakan dalam pembuatan sebuah tampilan website, berikut penjelasan framework responsive web design (Bootstrap, Foundation, dan Skeleton):

11

2.2.1

Bootstrap Bootstrap adalah open-source front-end toolkit yang dikembangkan

oleh Mark Otto dan Jacob Thornton dari perusahaan yang berkecimpung dalam bidang sosial media yaitu Twitter, dirilis pada Agustus 2011. Bootstrap dikembangkan dengan tujuan untuk membantu desainer dan pengembang dalam membangun front-end sebuah website secara cepat dan efisien. Twitter Bootstrap secara cepat menjadi proyek yang paling di dilihat pada GitHub dengan lebih 33.000 pengguna GitHub yang melihat, dua kali lipat lebih banyak dibanding posisi kedua (Cochran, 2012: 2). Framework Bootstrap mengkategorisasikan ukuran resolusi layar ke dalam 4 kategori, yaitu: I. Large Devices (dengan ukuran resolusi layar ?J200px)

2. Medium Devices (dengan ukuran resolusi layar ?992px) 3. Small Devices (dengan ukuran resolusi layar 2:768px) 4. Extra Small Devices (dengan ukuran resolusi layar <768px)

2.2.2

Foundation ZURB Foundation adalah framework pembuatan responsive web

design open source untuk pengembangan front-end yang dikembangkan oleh

ZURB. ZURB adalah perusahaan desain yang fokus ke bidang desain interaksi berlokasi di Campbell, California, Amerika Serikat. ZURB Foundation berisi template desain HTML dan CSS berbasis tipografi, bentuk:, logo, tombol, navigasi, dan komponen antarmuka lainnya, serta opsional pelengkap tembahan JavaScript. ZURB Foundation fiwnework meraih tempat ke-16 sebagai proyek

12

terpopuler di GitHub, sebuah forum sosial para pengembang aplikasi, website, aplikasi, dan perangkat lunak. ZURB Foundation pertama kali rilis pada September 2011, pada Oktober 2011 Zurb merilis Foundation 2.0 sebagai open-source responsive web

design framework dibawah lisensi dari Massachusetts Institute of Technology.

2.2.3

Skeleton Skeleton adalah kumpulan kecil files CSS untuk pengembangan web

desain yang dikembangkan oleh Dave Gamache. Skeleton memiliki 3 prinsip dasar yaitu :

a. Responsive Grid to Mobile Skeleton sangat familiar dan ringat digunakan dengan 960 gridgrid sebagai dasarnya, dan secara elegan dapat menyesuaikan dengan ukuran browser yang diperbesar atau diperkecil.

b. Fast to Start Skeleton framework yang cepat untuk digunakan untuk rapid

development, dengan grid-grid yang terstruktur dan pertimbangan untuk pengembangan di telepon genggam yang mudah. Skeleton dilengkapi dengan struktur file dan elemen antarmuka yang beragam.

c. Style Agnosic Perangkat pengembangan yang paling mendasar yang dapat menyesuaikan berbagai gaya desain denganframework Skeleton.

13

2.2.4

Perbanllingan 3 Framework Responsive Web Design

Tabel 2.1 Komparasi Framework Responsive Web Design (Sumber: http:!/responsive. vennilion.com/compare.php) Bootstrap3 Ringkasan

• •

•

•

Basis pengguna besar Grids: Fluid dan fixed Perangkat antarmuka : banyak widget; eocok untuk rapid prototyping. Sejarah: Dikembangkan oleh Twitter sebagai acuan style untuk perangkat internal.

• •

Github Pengembang Lisensi Dukungan Browser

• • •

semuajenis

•

•

Versi Terakhir rilis Website

Foundation 4 Basis pengguna medium Grids: Fluid. Terbaik dalam kelas grids di viewports. Perangkat antarmuka: set perangkat powerful dan modular. Style agnostic lebih banyak dibanding Bootstrap. Sejarah: Mobile-first ke boilerplate dikembangkan oleh ZURBuntuk proyek-proyek klien.

•

Skeleton Basis pengguna medium Grids: fixed Perangkat antarmuka: terbatas Sejarah: style agnostic dan lebih ringan.

3 26 Juni 2014

4.0 28 Februari 2013

htt12J{t'vi IJ.~r. eith ub.com/ J?g__QJslra12'.'. J1 tt p://git hu h.con1/t\vitJ~rf bootst111p/

http://foundation .z~.uti.,, co

ndp.JiOJJ

a1nache/Skeleton

Twitter MIT License Chrome (Mac, Windows, iOS, and Android) Safari (Mac and iOS only) Firefox (Mac, Windows) Opera (Mac and Windows) IE8+

ZURB MIT License Desktop: Chrome, Firefox, Safari, IE9+ Mobile: iOS (iPhone), iOS (iPad), Android 2, 4 (Phone), Android 2, 4 (Tablet), Windows Phone 7+, Surface

Dave Gamache MIT License Desktop: Chrome, Firefox, Safari, IE?+ Mobile: iPhone, Droid, iPad

n1/

http:/I gj thu b.co1n/ zurb/fo11

1.2 20 Juni 2012 http:/I get.~.keleton. com

! !illn:/I eithu b. corn/dh g

css Reset

Normalize.css

Normalize.css

Inspired by Meyer's reset

LESS

Ya

Tidak

Tidak

Eric

15

2.2.5

Alasan Menggnnakan Framework Bootstrap Dari 3 framework yang penulis bahas dalam penulisan skripsi ini,

penulis memilih menggunakanframework Bootstrap dengan alas an yaitu: 1. Framework Bootstrap sebagai proyek paling banyak dilihat di forum pengembang teknologi informasi GitHub, dilihat lebih

33.000 anggota forum, dua kali lebih banyak dari peringkat kedua terbanyak (Cochran, 2012, 2).

2. Buku-buku dan sumber yang lebih banyak. 3. Lebih mudah dipahami oleh pemula.

4. Fitur-fitur untuk tampilan website yang cukup lengkap. 2.3 2.3.1

Desain Web HyperText Markup Language 5 (HTML5) HTML5 adalah versi terbaru dari spesifikasi HTML yang telah ada

sejak tahun 1997 dan sudah banyak browser yang mendukung fitur-fitur pada HTML5. Perubahan HTML5 mencakup fokus pada semantic markup seperti penambahan

,