ABSTRAK

Esa Saputra Yunus, 12112559

Pengembangan Konten Kombinatorik Untuk Buku Elektronik Kombinasi Dan Permutasi Berformat HTML

Penulisan Ilmiah, Jurusan Sistem Informasi, Fakultas Ilmu Komputer dan Teknologi Informasi, Universitas Gunadarma, 2015.

Kata Kunci: E-book, Kombinasi dan Permutasi, Kombinatorik

( xv + 71 + Lampiran )

Buku merupakan media pembelajaran yang sangat populer dan paling sering digunakan oleh manusia, dari buku inilah kita banyak mendapatkan ilmu pengetahuan yang bermanfaat. Jika buku pada umumnya terdiri dari kumpulan kertas yang hanya dapat berisikan teks atau gambar, dengan menggunakan e-book buku dapat disimpan dalam format digital yang dapat berisikan teks, gambar, suara dan animasi sehingga memudahkan pengguna mempelajari materi e-book.

Salah satu mata kuliah yang dianggap sulit di jurusan Ilmu Komputer (Sistem Informasi dan Sistem Komputer) adalah mata kuliah matematika Diskrit, materi yang dipelajari salah satunya kombinatorik. Dengan menggunakan E-book Pengembangan Konten Kombinatorik Kombinasi dan Permutasi diharapkan dapat membantu mahasiswa dalam mempelajari matematika diskrit menjadi lebih mudah. Aplikasi e-book ini menggunakan perangkat lunak Kvisoft Flibook Marker, Adobe Photoshop Cs3, Adobe flash Cs3, Mirosoft Word 2010 dan Internet Browser.

Daftar Pustaka (2011-2015)

KATA PENGANTAR

Segala puji dan syukur saya panjatkan kepada Tuhan yang Maha Esa yang mana telah memberikan anugerah dan karunia yang melimpah, sehingga penulis dapat menyelesaikan Penulisan Ilmiah ini.

Penulisan Ilmiah ini disusun guna melengkapi sebagian syarat dalam mencapat gelar Setara Sarjana Muda pada jurusan Sistem Informasi, Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Gunadarma. Adapun judul Penulisan Ilmiah ini adalah “Pengembangan Konten Kombinatorik Untuk Buku Elektronik Kombinasi Dan Permutasi Berformat Html”.

Penulisan ilmiah ini dimaksudkan untuk melengkapi salah satu syarat untuk mencapai jenjang setara sarjana muda Universitas Gunadarma. Penulis menyadari bahwa tulisan ilmiah ini masih jauh dari kesempurnaan, untuk itu diharapkan dengan segala kerendahan hati kiranya dapat diberikan saran dan kritik yang bersifat membangun kepada penulis guna tercapainya karya yang lebih baik di masa depan nanti.

Di dalam menyusun laporan tulisan ilmiah ini, banyak sekali pihak-pihak yang membantu baik secara materil ataupun imateril serta saran-saran dari berbagai macam pihak, dan juga yang telah memberikan pengarahan serta koreksi yang sangat bermanfaat dalam membimbing penulis sampai dengan terselesainya tulisan ilmiah ini.

Pada kesempatan ini juga, penulis tidak lupa untuk mengucapkan terima kasih kepada :

1. Prof. Dr. E. S. Margianti, SE., MM., selaku Rektor Universitas Gunadarma.

2. Prof. Dr.rer.nat. Achmad Benny Mutiara Q. N., S.Si, S.Kom, selaku Dekan Fakultas Ilmu Komputer dan Teknologi Informasi Universitas Gunadarma.

3. Dr. Setia Wirawan, S.kom., MMSI., selaku Ketua Jurusan Sistem Informasi Universitas Gunadarma.

4. Dr. Sri Nawangsari, SE., MM. selaku koordinator Tulisan Ilmiah.

5. Dr. Sulistyo Puspitodjati, Ssi., SKom., MSc(Cs) selaku dosen pembimbing yang telah meluangkan waktu dan pikirannya dalam bentuk bimbingan kepada penulis.

6. Kedua Orang tua dan keluarga tercinta (Inu Wahyudhy Yunus dan Dwi Anggrayani) yang telah memberikan dorongan dan semangat serta doa dari awal tulisan hingga akhir penyusunan tulisan ilmiah ini.

7. Teman-teman Kosan Ridho yang selalu memberikan dukungan dan hiburan dikala penat saat pengerjaan penulisan ini.

8. Teman sekelompok penulisan ilmiah (Destra Triandika, M. Wildan Rizki, Ridwan Fiatmoko dan Ridho Hanal) yang telah bersedia menuangkan ide bersama ke dalam penulisan ilmiah ini.

9. Keluaga besar kelas 3KA19 angkatan 2012 yang saling mendukung dan memberi saran maupun masukkan serta ilmunya dalam penyelesaian penulisan ini.

10. Semua pihak yang telah membantu dan memberikan dukungan hingga terselesaikannya penulisan ini yang tidak dapat disebutkan satu-persatu.

Penulis juga ingin menyampaikan, bahwa penulisan ini masih jauh dari sempurna. Oleh karena itu, kritik, saran, dan masukan sangat penulis harapkan untuk perbaikan pada penulisan selanjutnya.

Pada akhirnya penulis berharap semoga penulisan ini bermanfaat bagi pembaca pada umumnya dan pecinta ilmu pengetahuan pada khususnya.

Jakarta, 10 Juli 2015

(Esa Saputra Yunus)

BAB 1

PENDAHULUAN

1.1 Latar Belakang

Buku merupakan media pembelajaran yang sangat popular dan paling banyak digunakan oleh manusia, dengan adanya buku manusia akan mendapatkan ilmu pengetahuan yang luas, karena buku adalah sumber ilmu.

Saat ini Perkembangan teknologi informasi semakin hari semakin pesat dalam berbagai aspek kehidupan. Hal ini memicu untuk mengembangkan dan membuat teknologi serta aplikasi-aplikasi yang berguna agar menarik minat pemakai. Dari kemajuan tekhnologi yang semakin pesat ini, buku kini tersdia bukan hanya dalam media cetak melainkan tersedia juga dalam media elektronik yang disebut e-book (buku elektronik).

E-book salah satu media pembelajaran yang saat ini sedang berkembang, media e-book sangat mudah di operasikan, karena media e-book memiliki banyak sekali format untuk pengoperasiannya. Belajar menggunakan e-book lebih diminati karena disamping penggunannya yang mudah dan efisien, e-book juga tidak membutuhkan biaya operasional yang tinggi karena media penyimpanan e-book berupa digital bukan berupa lembaran kertas. Selain itu e-book dapat disimpan dalam media digital seperti komputer, notebook, laptop dan gadget lainnya.

Salah satu mata kuliah di universitas yang dianggap sulit adalah mata kuliah matematika, khususnya untuk mahasiswa fakultas Ilmu Komputer yang sulit akan mempelajari seputar perhitungan matematika. Salah satu diantaranya adalah matematika Kombinasi Permutasi materi yang dipelajari khususnya Kombinatorik, fungsi pembangkit, relasi rekursif, grup dan ring dan pembangkitan objek kombinatorik.

Di tingkat kedua perkuliahan pada umumnya, mahasiswa akan mempelajari hal tersebut melalui media buku teks biasa yang tentu akan sangat membosankan mengingat banyaknya persoalan yang harus dipecahkan menggunakan rumus. Untuk mengatasi hal hal tersebut, dibutuhkan sebuah media yang interaktif untuk mahasiswa agar mempermudah proses pembelajaran.

Dengan penggunaan E-book sebagai media pembelajaran interaktif diharapkan agar mahasiswa dapat lebih mudah mempelajari mata kuliah matematika kombinasi permutasi.

1.2 Batasan Masalah

Dalam penulisan ini penulis mengangkat materi dari matematika Kombinatorik untuk dibuatkan e-book. E-book diambil dari draff buku kombinasi dan permutasi oleh Dr Sulistyo Puspitodjati, SSi., SKom.,MSc(CS), Dra. Henny Widowati Farida, MM dan Dr. D. Lucia Crispina Pardede, DEA. [1] membuat sebuah media pembelajaran interaktif tentang matematika diskrit melalui E-book yang dikhususkan untuk mahasiswa tingkat kedua dengan animasi berbasis flash. Materi yang dikembangkan adalah bab kombinatorik permutasi dan kombinasi dari [1]. Objek animasi akan menjelaskan bagaimana memecahkan persoalan dengan bantuan gambar bergerak. E-book kombinasi dan permutasi di operasikan pada internet browser. Software E-book yang dipakai adalah Kvisoft Flipbook Maker.

1.3 Tujuan Penulisan

Tujuan penulisan ilmiah ini adalah menghasilkan e-book kombinasi dan permutasi khusus konten kombinatorik dengan visualisasi penjelasan menggunakan media animasi.

1.4 Metode Penelitian

Pembuatan penulisan ilmiah ini terbagi menjadi beberapa tahap pengerjaan yaitu sebagai berikut:

1). Pengumpulan Data

Penulis mengumpulkan teori yang mengacu pada pembahasan. Pengumpulan teori ini sebagai acuan dalam pembuatan Electronik Book dan animasi. Proses pengumpulan teori ini meliputi pencarian dari buku serta artikel-artikel dari internet.

2). Analisis dan Perancangan

Kemudian dilanjutkan dengan pembuatan desain tampilan e-book beserta animasi pemecahan masalah menggunakan software Adobe flash. Setelah itu diproses menjadi E-book dengan menggunakan Kvisoft Flipbook Maker.

3). Implementasi

Dalam pembuatan aplikasi ini software dan hardware yang digunakan adalah:

1) Sistem Operasi Windows 8.1 64bit

2) Memori RAM 4Gb

3) Processor Intel Core i5-4217U CPU @ 1.70 GHz

4) Kvisoft Flipbook Maker

5) Adobe Photoshop

6) Adobe Flash

7) Microsoft Word

4). Pengujian

Akan dilakukan uji coba pada aplikasi, apakah aplikasi berjalan baik dan sesuai dengan tujuan yang ada.

1.5 Sistematika Penulisan

Memberikan sedikit gambaran mengenai penulisan ilmiah ini. Penulis menguaraikan isi setiap bab secara garis besar dalam sistematika penulisan sebagai berikut :

1). BAB 1 PENDAHULUAN

Bab ini menjelaskan latar belakang masalah, batasan masalah, tujuan penulisan, metode penelitian dan sistematika penulisan.

2). BAB 2 LANDASAN TEORI

Pada bab ini membahas secara teori tentang konsep dasar sistem, serta teori-teori yang mendasari penulisan ini yang dilakukan oleh penulis.

3). BAB 3 ANALISA DAN PEMBAHASAN

Pada bab ini membahas tentang analisa kebutuhan program, struktur navigasi, rancangan menu tampilan, langkah-langkah pembuatan aplikasi e-book, dan membahas tentang pengujian aplikasi.

4). BAB 4 PENUTUP

Pada bab ini berisi tentang kesimpulan penulis mengenai penulisan ini serta harapan pengembangan selanjutnya.

BAB 2

LANDASAN TEORI

E-book sering disebut buku elektronik atau buku digital. Jika buku pada umumnya terdiri dari kumpulan kertas yang dapat berisikan teks atau gambar, maka buku elektronik berisikan informasi digital yang juga dapat berwujud teks atau gambar.

2.1. Format E-book

1). Doc dan Rich Text Format (RTF)

Doc dan RTF adalah standar word prosesor yang banyak digunakan di seluruh dunia, karena sangat kompetibel dengan sistem operasi windows.

2). Hypertext Mark-up Language (HTML)

HTML merupakan format yang bisa digunakan untuk menampilkan halaman web. Untuk membacanya dbutuhkan aplikasi browser seperti Internet Explorer, Mozilla Firerox, Opera, Google Chrome dan lain sebagainya.

3). Compiled HTML Help File (CHM)

Format ini merupakan pengembangan dari format HTML, terkenal sebagai format CHM sebagai pengembangan HTML, fromat CHM mampu menyimpan banyak halaman beserta link-nya termasuk juga mampu menyimpan banyak halaman beserta link-nya termasuk juga gambar dalam satu file saja (kompile). Fromat ini mampu mengatur halaman layaknya seperti sebuah buku. Fitur navigasinya juga sangat nyaman dalam penempatan bab, daftar isi, pencarian dan favorit.

4). Device Independent (DVI)

Format dvi adalah keluaran dari Tex dan Latex document prosesor. Format ini telah dikembangkaan oleh Donald E Knuth dari Stanford University tahun 1997. File yang dihasilkan relatif kecil sehingga sangat cocok digunakan untuk distribusi jurnal, makalah, tesis dan laporan teknik karena laporan ini memiliki fasilitas grafik yang sangat terbatas.

5). Portable Document Format (PDF)

Pdf merupakan sebuah format file yang dibuat oleh Adobe System pada tahun 1993. Pdf memiliki unsur content yang lengkap dikarenakan melibatkan teks, huruf, citra dan grafik. File Pdf hanya bisa dibaca menggunakan tool khusus yaitu Adobe Reader, Foxit Reader dan lain-lain. Format jenis ini sangat nyaman digunakan karena terdapat fasilitas navigasi halaman, thumbnail, zoom teks, fasilitas pencarian, dan masih banyak lagi.

6). Format EXE

Fromat EXE biasanya merupakan gabungan atau kompilasi dari file pdf dan juga html. Format jenis ini biasanya akan membantu dalam proses membaca file, misalnya jika komputer tidak terinstal adobe reader.

2.2 Definisi Multimedia

Dari segi bahasa muliedia tersusun atas dua buah kata, yaitu muli dan media. Multi yang berarti lebih dari satu, banyak atau beraneka ragam, sedangkan media adalah wadah atau tempat atau sarana yang dapat dimanfaatkan untuk keperluan tertentu. Sehingga penjabaran multimedia secara umum adalah suatu aplikasi yang terusun atas beberapa elemen pembentuk yang diproses dan disajikan dalam wadah aplikasi secara linier ataupun interaktif.

2.2.1 Elemen-elemen Multimedia

Multimedia merupakan gabungan beberapa media yang kemudian didefinisikan sebagai elemen-elemen dalam bentuk multimedia. Elemen-elemen dalam pembentukan aplikasi multimedia yaitu :

2.2.1.1 Teks

Teks merupakan elemen multimedia yang menjadi dasar untuk menyampaikan informasi, karena teks adalah jenis data yang paling sederhana dan membutuhkan tempat penyimpanan yang paling kecil. Teks

merupakan cara yang paling efektif dalam mengemukakan ide-ide kepada pengguna, sehingga penyampaian informasi akan lebih mudah dimengerti oleh masyarakat. Jenis-jenis teks seperti Printed Text, yaitu teks yang dihasilkan oleh word processor atau word editor dengan cara diketik yang nantinya dapat dicetak. Scanned Text yaitu teks yang dihasilkan melalui proses scanning tanpa pengetikan. Dan Hypertext yaitu jenis teks yang memberikan link ke suatu tempat atau meloncat ke topik tertentu.

2.2.1.2 Grafik (Gambar)

Sangat bermanfaat untuk mengilustrasi informasi yang akan disampaikan terutama informasi yang tidak dapat dijelaskan dengan kata-kata. Jenis-jenis grafik seperti bitmap yaitu gambar yang disimpan dalam bentuk kumpulan pixel, yang berkaitan dengan titik-titik pada layar monitor. Digitized picture adalah gambar hasil rekaman video atau kamera yang dipindahkan ke komputer dan diubah ke dalam bentuk bitmaps. Hyperpictures, sama seperti hypertext hanya saja dalam bentuk gambar.

2.2.1.3 Animasi

Animasi adalah simulasi gerakan yang dihasilkan dengan menayangkan rentetan frame ke layer. Frame adalah satu gambar tunggal pada rentetan gambar yang membentuk animasi. Menurut Foley, Van Dam, Feiner dan Hughes (1997, p1057) Animate adalah untuk membuat sesuatu hidup, sebagian orang mengira bahwa animasi itu sama dengan motion (gerakan), tetapianimasi mencakup semua yang mengandung efek visual sehingga animasi mencakup perubahan posisi terhadap waktu, bentuk, warna, struktur, tekstur dari sebuah objek, posisi kamera, pencahayaan, orientasi dan focus dan perubahan dalam teknik rendering.

2.3 HTML

HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang dapat dibuat dengan teks editor. Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam web browser. Ada dua cara untuk membuat web page, dengan HTML editor atau editor text biasa (misal : notepad).

2.3.1 Penamaan Dokumen

Dokumen HTML diberi nama sembarang kemudian diberi tambahan ekstensi

”.htm” atau ”.html”

2.3.2 Definisi Elemen

Dokumen HTML disusun elemen-elemen atau komponen dasar pembentu HTML. Contoh dari elemen dokumen HTML adalah : head , body, table, paragraf, list.

2.3.3 Definisi Tag

Tag digunakan untuk menandai elemen dalam suatu dokumen HTML. Tag HTML terdiri atas sebuah sudut kiri (<, tanda lebih kecil), nama sebuah tag, dan sebuah tanda kurung sudut kanan (>, tanda lebih besar. Tag umumnya berpasangan, sebagai contoh

Dengan

. Secara umum suatu elemen dalam dokumen HTML yangdinyatakan dengan tagnya, dituliskan : - .

2.3.4 Elemen HTML

Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan

dengan tag <html>,<head>, dan <body>.Setiap dokumen terdiri atas tag head dan body. Elemen Head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang akan ditampilkan di browser. Secara umum dokumen web dibagi menjadi dua section, yaitu section head dan section body. Sehingga setiap dokumen HTML harus mempunyai pola sebagai berikut :

-- Informasi tentang dokumen HTML

-- Informasi yang akan ditampilkan dalam web browser

Setiap dokumen html harus diwali dengan menuliskan tag <html> dan tag </html> di akhir dokumen. Tag ini menandai dokumen HTML yang berarti adalah dokumen HTML dalam satu dokumen hanya ada satu elemen html. Section atau elemen head ditandai dengan tag <head> diawal dan tag </head> diakhir. Section ini beiris informasi tentang dokumen HTML, misalnya informasi judul html yang ditandai dengan tag <title> dan diakhiri dengan tag </title>. Section body ditandai dengan tag <body> dan diakhiri dengan tag </body> diakhir. Section body merupakan isi dokumen yang akan ditampilakn pada browser.

Gambar 2.1. Contoh hasil di browser firefox

2.3.5 Penggunaan Tag

Didalam penulisan dan penggunaan tag HTML perlu di perhatikan tata cara yang sudah di tetapkan , diantaranya adalah sebagai berikut :

1) Tag HTML diapit dengan dua karakter kurung bersudut, < dan >.

2) Tag HTML secara normal selalu berpasangan seperti dengan

3) Tag HTML tidak ‘case sensitive’, berarti

dama dengan

2.3.6 Atribut Tag

Tag dapat mempunyai atribut. Atribut menyatakan sesuatu tentang tag tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan. Tag berikut tidak mempunyai atribut : <body>. Tag <body> ini tidak menggunakan atribut, sehingga dokumen HTML ditampilkan dengan warna background sesuai dengan definisi warna background pada browser webnya. Umumnya berwarna putih. Tag berikut mempunyai atribut : <body bgcolor=”red”>. Tag <body> ini mempunyai atribut bgcolor dengan nilai “red’. Sehingga background akan menampilkan warna merah.

2.3.6.1 Tag Paragraf

Setiap paragraf harus dimulai dengan memberi tag . Diakhir paragraf tidak diharuskan menuliskan

sebagai akhir paragraf, karena tag tidak didefinisikan mempunyai tag akhir. Setiap paragraf harus dimulai dengan kembali. Setiap pergantian paragraf ditandai dengan tag . Contoh listing tag paragraf:

Tag Paragraf

berikut ini adalah paragraf 1

berikut ini adalah paragraf 2

berikut ini adalah paragraf 3

2.3.6.2 Line Break

Fungsi tag ini dapat memaksa ganti baris pada dokumen web dengan tag . Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi tidak berganti paragraf. Contoh line break adalah sebagai berikut :

Ganti Baris

ini adalah baris ke 1

ini adalah baris ke 2

ini adalah baris ke 3

ini adalah baris ke 4

ini adalah baris ke 5

2.3.6.3 Heading

Tag heading akan membuat tulisan ditampilkan dengan huruf yang lebih besar atau ditebalkan. Heading dimanfaatkan untuk menandai judul topik atau untuk menunjukkan tingkat keberartian dati teks yang akan dituliskan. Ada 6 tingkat heading dalam HTML, dinomori dari satu sampai dengan 6. Nomor 1 merupakan heading yang terbesar. Contoh heading adalah sebagai berikut :

Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Gambar 2.2 Contoh Heading

2.3.6.4 Garis Pembatas

Sebuah garis pembatas dapat disisipkan dalam dokumen web dengan menggunakan tag

. Contoh garis pembatas adalah sebagai berikut.

Horizontal Rule

Paragraf pertama

2.3.6.5 Komentar

Dalam sebuah dokumen HTML ada informasi yang berfungsi sebagai catatan atau komentar terhadap dokumen isi komentar ini tidak akan ditampilkan dalam browser. Untuk membuat komentar dengan menggunakan tag: sebagai akhir komentar. Contoh listing komentar :

Horizontal Rule

Tulisan ini akan ditampilkan di browser

2.4 Microsoft Word 2010

Microsoft Office adalah suatu kumpulan software produktifitas perkantoran yang pertama kali diluncurkan tanggal 30 Agustus 1992 sebagai office 3.0 yang menyertakan word untuk pengolahan kata, Microsoft Excel sebagai pengolah angka, Microsoft PowerPoint digunakan sebagai aplikasi presentasi dan Mail digunakan untuk menerima dan mengirim email. Sejak masa itu dan di awal tahun 2000-an Microsoft sudah merilis banyak versi office, setiap versinya mengalami pembaharuan demi pembaharuan dan menjadi semakin mutakhir baik dari segi pemakaian, fasilitas-fasilitas baru yang disertakan, serta penambahan program baru dalam kelompok office.

Microsoft Word 2010 merupakan salah satu program aplikasi pengolah kata atau dokumen versi terbaru yang termasuk ke dalam Microsoft Office 2010. Aplikasi ini pengembangan dari versi sebelumnya yaitu Microsoft Word 2007 yang sukses di rilis ke pasaran. Microsoft Word 2010 mempunyai tampilan user interface (UI) baru yang mengganti menu, toolbars, dan sebagian besar task panes yang ada di Microsoft Word versi sebelumnya dengan mekanisasi tunggal yang lebih simpel dan efisien. Fasilitas andalannya ini dinamakan Ribbon yang merupakan cara baru untuk mengelompokkan menu pada toolbar. User interface (UI) baru ini dirancang untuk membantu Anda bekerja lebih produktif serta mudah dalam menggunakan seluruh fasilitas dan fungsi yang ada.

Berikut ini adalah beberapa istilah yang akan dipakai dalam mengoperasikan Microsoft Word 2010:

2.4.1 Hotkey / shortcut

Berupa kombinasi beberapa tombol tertentu pada keyboard yang menyebabkan

program aplikasi yang sedang berjalan untuk melakukan suatu proses tertentu

2.4.2 Toolbar (pada Mic. Word 2010 disebut ribbon)

Ribbon adalah sekumpulan menu dalam setiap Tab. Sedangkan Group adalah sekumpulan atau kelompok menu dalam tiap Ribbon yang memiliki kesamaan fungsi. Sedangkan, Tab menyediakan Ribbon, Ribbon terdiri dari beberapa Group, dan Group terdiri dari sekumpulan menu yang memiliki kesamaan fungsi. Berikut adalah coontoh gambar ribbon dan group yang ditunjukan pada Gambar 2.3.

Gambar 2.3 Menu dan Ribbon pada Tampilan Awal

2.4.3 Ruler Margin (Indent)

Fungsi dari ruler margin adalah untuk mengatur batas kiri dan kanan dari suatu halaman

First Line Indent

Right Indent

Hanging Indent

Left Indent

Gambar 2.4 Pengaturan Ruller (Garis)

Didalam ruler margin, terdapat istilah- istilah yang dapat membatu dalam mengatur batas kiri dan kanan dari suatu halaman. Pengaturan ini dapat di sesuaikan oleh keinginan setiap pengguna , istilah pada ruler margin adalah sebagai berikut :

1). First Line Indent

Digunakan untuk mengatur posisi huruf pertama pada setiap awal paragraf

2). Hanging Indent

Digunakan untuk mengatur posisi huruf setelah baris pertama pada suatu paragraf

3). Left Indent

Digunakan untuk mengatur batas kiri untuk semua teks

4). Right Indent

Digunakan untuk mengatur batas kanan untuk semua teks

2.4.4 Clipboard

Group Clipboard terdiri dari sekumpulan menu yaitu:

1). Paste untuk menempelkan hasil copy atau cut.

2). Cut untuk memotong teks/objek terpilih.

3). Copy untuk menggandakan teks/objek terpilih.

4). Format Painter digunakan untuk meniru format halaman dokumen ke dalam dokumen lainnya.

Gambar 2.5 Tampilan Clipboard

2.4.5 Font (huruf)

Menu-menu di Group Font secara khusus berfungsi untuk pemformatan seputar huruf. Terdiri dari :

1). Font untuk memilih jenis huruf

2). Font Size untuk mengatur ukuran huruf

3). Grow Font untuk memperbesar ukuran huruf secara instan

4). Shrink Font untuk memperkecil ukuran huruf secara instan

5). Change Case untuk mengubah status huruf kapital/huruf kecil

6). Clear Formatting untuk menghapus pemformatan teks terpilih

7). Bold untuk menebalkan teks terpilih

8). Italic untuk memiringkan Teks terpilih

9). Underline untuk memberikan garis bawah pada teks terpilih

10). Strikethrough memberikan tanda coret padateks terpilih

11). Subscript untuk mengetik karakter pemangkatan

12). Superscript untuk mengetik karakter pemangkatan

13). Text Effect untuk memberikan efek artistik pada teks terpilih

14). Text Highlight Color untuk memberikan warna stabilo di belakang teks terpilih

15). Font Color untuk mengatur warna teks terpilih.

Gambar 2.6 Tampilan Font (Huruf)

2.4.6 Paragraph (Paragraf)

Group Paragraph terdiri dari sekumpulan menu yang memiliki kesamaan fungsi untuk mengatur paragraf teks. perintah-perintah di Group Paragraph yaitu:

1). Bullets untuk memberikan tanda bullet di tiap paragraf terpilih

2). Numbering untuk memberikan format penomoran di tiap paragraf terpilih

3). Decrease Indent untuk menggeser baris kedua paragraf ke kiri

4). Increase Indent untuk menggeser baris kedua paragraf ke kanan

5). Left-to-Right untuk menjadikan arah teks berjalan dari kiri ke kanan (format Latin)

6). Right-to-Left untuk menjadikan arah teks berjalan dari kanan ke kiri (format Arab)

7). Sort untuk menyortir data

8). Show Paragraph Marks untuk menampilkan / menyembunyikan tanda koreksi paragraf

9). Align Text Left untuk mengatur teks rata kiri

10). Center untuk mengatur teks rata tengah

11). Align Text Right untuk mengatur teks rata kanan

12). Justify untuk mengatur teks rata kanan-kiri

13). Line Spacing untuk mengatur jarak antar baris teks

14). Shading untuk mengatur warna latar teks terpilih

15). Border untuk memberikan garis tepi pada teks terpilih.

Gambar 2.7 Tampilan Paragraph (Paragraf)

2.4.7 Tampilan dan Fasilitas Microsoft Word 2010

Microsoft word 2010 memiliki tampilan yang tidak banyak berubah dari Microsoft word 2007 , tampilan awal terdiri dari banyak fasilitas menu bar dan tools bar yang dapat membantu membuat dokumen menjadi lebih mudah. Tampilan awal dari Microsoft Word 2010 seperti gambar 2.8 berikut :

Gambar 2.8 Tampilan Microsoft Word 2010

2.5 Adobe Flash Professional CS3

Adobe Flash Cs3 Professional merupakan salah satu software bagian dari keluarga Adobe, yang sekarang menjadi salah satu standar untuk industri animasi dan web yang banyak digunakan. Perangkat lunak Adobe Flash yang selanjutnya disebut Flash dulunya bernama Macromedia Flash adalah software multimedia unggulan yang dulunya dikembangkan oleh Macromedia, tetapi sekarang dikembangkan dan didistribusikan oleh Adobe System. Sejak tahun 1996, Flash menjadi metode populer untuk menambahkan animasi dan interaktif web site. Flash biasanya digunakan untuk membuat animasi, hiburan dan berbagai komponen web, di integrasikan dengan video dalam halaman web sehingga dapat menjadi aplikasi multimedia yang kaya (Rich Internet Application). Flash tidak hanya digunakan untuk aplikasi Web, tetapi dapat juga dikembangkan untuk membangun aplikasi desktop karena aplikasi Flash selain dikompilasi menjadi format swf, Flash juga dapat dikompilasi menjadi format exe. Flash dapat digunakan untuk memanipulasi vektor dan citra raster, dan mendukung bidirectional streaming audio dan video. Flash juga berisi bahasa skrip yang diberinama Action Script. Flash dijalankan dengan Adobe Flash Player yang dapat ditanam pada browser, telephone celuler, atau software lain. Format file Flash adalah SWF, biasanya disebut ShockWave Flash movie. Berikut adalah tampilan start page pertama kali membuka Adobe Flash Professional CS3 pada gambar 2.9

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPxkzl7N2DhkRfqU9SMptKb2gIZYoa4MEmCjKG5qix3YGkYMMq4VxkKSZD0jwGjNeV_6ksDqQzTsoB_weht7OSl7ANjZJELNsyNte8k2QEFm9Wg43zBCOiw6EVDNXi73RW_U_NZJN16YI/s320/flash.jpg

Gambar 2.9 Tampilan Awal Adobe Flash Cs3

2.5.1 Dasar-dasar Penggunaan Adobe Flash Professional CS3

Penggunaan Adobe Flash Professional CS3 memang tidak sulit bagi yang sudah sering melakukan berbagai desain grafis, karena tools dan fasilitas yang terdapat pada Adobe Flash Professional CS3 cukup lengkap dan sederhana. Berikut penjelasan dasar-dasar penggunaannya.

2.5.1.1 Halaman Awal

Halaman awal adalah tampilan pertama kali yang tampil ketika mengakses program Adobe Flash Professional CS3. Cara mengakses Adobe Flash Professional CS3 pertama kali adalah double klik pada icon Adobe Flash Professional CS3 yang ada di desktop atau lihat dari daftar program yang ada di Start Menu. Berikut adalah tampilan start page pertama kali membuka Adobe Flash Professional CS3.

Gambar 2.10 Tampilan awal Page Adobe Flash Professional CS3

2.5.1.2 Jendela Utama

Jendela utama merupakan awal dari pembuatan program, pembuatannya dilakukan dalam kotak movie dan stage yang didukung oleh tools yang ada. Jendela kerja flash terdiri dari panggung (stage) dan panel-panel. Panggung merupakan tempat dimana objek diletakkan, tempat menggambar dan tempat menganimasikan gambar. Sedangkan panel disediakan sebagai tempat untuk membuat gambar, mengedit, dan menganimasikan gambar juga. Berikut ini adalah tampilan jendela utama Adobe Flash Professional CS3 yang dtunjukan pada gambar 2.11.

Gambar 2.11 Jendela Utama Adobe Flash Professional CS3

Setiap menu dan tools dalam Adobe Flash Professional CS3 memiliki keterangan sebagai berikut :

1). Menu Bar, adalah baris menu yang terdiri 11 elemen yang utama dan masing-

masing memiliki submenu perintah lagi.

2). Timeline, adalah panel untuk mengatur dan mengkontrol jalannya animasi Flash yang meliputi kecepatan animasi dan penempatan objek yang akan dibuat.

3). Color Panel, digunakan untuk memberi warna pada objek dan mengatur komposisi warna pada objek yang akan dibuat.

4). Stage, adalah area untuk menempatkan materi animasi, seperti objek gambar,

video, teks, maupun tombol.

5). Property Inspector, berguna untuk mengatur setting stage, atribut objek, penggunaan filter, hingga mempublikasikan movie flash. Selain itu properties panel juga akan menampilkan informasi ukuran dan posisi objek yang sedang dipilih.

6). Toolbox, adalah beragam piranti untuk menyeleksi, menggambar, memberi warna, memodifikasi objek hingga mengatur ukuran tampilan stage.

2.5.1.3 Toolbox

Fasilitas Toolbox seperti yang telah dijelaskan sekilas diawal adalah beragam

piranti atau alat yang mempunyai fungsi tersendiri untuk keperluan desain. Berikut penjelasan setiap tool yang terdapat pada Toolbox.

Tabel 2.1 Tools Yang Terdapat Pada Toolbox

Gambar	Nama	Penjelasan
	Selection Tool	Digunakan untuk memilih atau menyeleksi suatu Objek
	Subselection Tool	Digunakan untuk menyeleksi bagian objek lebih detail daripada selection tool.
	Free Transform Tool	Digunakan untuk mentransformasikan objek Terseleksi
	3D Rotation Tool	Digunakan untuk melakukan 3D pada objek berdasarkan sumbu X, Y dan Z.
	3D Rotation Tool	Digunakan untuk melakukan 3D pada objek berdasarkan sumbu X, Y dan Z.
	Pen Tool	Digunakan untuk menggambar garis dengan bantuan titik-titik bantu seperti dalam pembuatan garis, kurva ataupun gambar.
	Text Tool	Digunakan untuk membuat objek teks ataupun paragraf.
	Line Tool	Digunakan untuk menggambar objek garis lurus.
	Rectangle Tool	Digunakan untuk menggambar bentuk persegi.
	Pencil Tool	Digunakan untuk menggambar dengan bentuk goresan pensil.
	Brush Tool	Digunakan untuk menggambar dengan bentuk polesan kuas.
	Deco Tool	Digunakan untuk menggambar corak dekorasi dengan menggunakan symbol grafik.
	Bone Tool	Digunakan untuk membuat animasi pertulangan dengan menambahkan titik sendi pada objek.
	Paint Bucket Tool	Digunakan untuk member warna bidang objek.
	Eyedropper Tool	Digunakan untuk mengambil sampel warna dari sebuah objek.
	Eraser Tool	Digunakan untuk menghapus bidang objek.
	Hand Tool	Digunakan untuk menggeser area lembar kerja atau stage tanpa mengubah pembesaran.
	Zoom Tool	Digunakan untuk memperbesar atau memperkecil tampilan lembar kerja atau stage.
	Stroke Color	Digunakan untuk memilih atau member warna pada suatu garis
	Fill Color	Digunakan untuk memilih atau member warna suatu objek.
	Black And White	Digunakan untuk mengubah warna garis dan bidang menjadi hitam putih.
	Swap Colors	Digunakan untuk membalikkan warna antara warna garis dan warna bidang objek.

2.6 Kvisoft Flipbook Maker

Kvisoft Flipbook maker adalah perangkat lunak untuk mengkonversikan file PDF ke bentuk menyerupai buku, perangkat lunak ini banyak digunakan oleh penulis buku atau majalah yang hasil karyanya ingin di publikasikan baik online maupun offline, tetapi masih dalam bentuk digital.

2.6.1 Halaman Awal dari Kvisoft Flipbook Maker

kvisoft flipbook maker memiliki tampilan yang sangat sederhana, tetapi fasilitas yang tersedia di dalam aplikasi ini cukup lengkap. Tampilan awal dari kvisoft flipbook maker terdiri dari menu dan tools yang akan di jelaskan pada gambar 2.8 berikut ini:

Gambar 2.12 halaman awal Kvisoft Flipbook Maker

Setiap tools dan fasilitas dalam halaman utama dalam Kvisoft Flipbook Maker memiliki keterangan sebagai berikut :

1). Add File, berfungsi untuk menginput file berekstensi .pdf ataupun .fb ke dalam lembar kerja .

2). Page Edit, Berfungsi sebagai media peng editan halaman proyek ebook.

3). design, sebagai media pemilihan tempelate dan layout pada ebook

4). publish, proses perubahan ekstensi yang tadinya adalah file .pdf menjadi file dalam ekstensi lain, misalnya html, exe dan wallpaper.

5). Import, hamper sama fungsinya seperti add file , yaitu memasukan halaman dile ke lembar kerja.

6). Delete, berfungsi sebagai penghapus halaman dan juga file yang sudah di import.

2.7 Adobe Photoshop CS3

Adobe photoshop merupakan salah satu program pengolah gambar standar professional. Tutorial adobe photoshop merupakan perangkat lunak editor citra buatan adobe system yang dikhususkan untuk pengeditan foto/gambar dan pembuatan efek. Perangkat lunak pengolah gambar atau foto dianggap sebagai produk terbaik yang pernah diproduksi oleh adobe system. Adobe Photoshop CS3 juga memiliki keunggulan untuk melakukan proses desain berbasis vektor. Dimana penggunaan vektor dalam Adobe Photoshop CS3 ini adalah object oriented.

Gambar 2.13 Tampilan Adobe Photoshop CS3

Shape sangat mudah untuk melakukan proses desain seperti seleksi, resize, drag dan beberapa proses desain lainnya terkait dengan pewarnaan. Selain itu, vektor atau shape dalam Adobe Photoshop CS3 memiliki resolusi independen, artinya ia mampu memberi batasan warna yang jelas pada setiap objek. Berikut ini adalah beberapa istilah yang akan dipakai dalam mengoperasikan Adobe Photoshop CS3 :

2.7.1 Crop Tool

Crop Tool digunakan untuk memotong gambar, foto ataupun canvas (kertas kerja). Pemotongan dengan alat ini dilakukan secara permanen mengubah bentuk dimensi lebar dan tinggi foto. Pemotongan dilakukan dengan menentukan area potong berbentuk kotak dari sebuah foto.

Gambar 2.14 Crop Tool

2.7.2. Slice Tool

Slice Tool digunakan untuk kebutuhan website dengan cara memotong hasil desain yang telah dibuat di Photoshop menjadi potongan yang lebih kecil.

Gambar 2.15 Slice Tool

2.7.3 Slice Select Tool

Slice Select Tool digunakan untuk memilih potongan pada sebuah desain yang telah dipotong sebelumnya dengan menggunakan slice tool.

Gambar 2.16 Slice Select Tool

2.7.4 Eyedropper Tool

Eyedropper Tool digunakan untuk mengambil sample warna dari sebuah gambar ataupun foto, sample warna diambil dengan cara mengklik warna target yang kemudian secara otomatis akan mengubah warna depan (foreground color) pada toolbox.

Gambar 2.17 Eyedropper Tool

2.7.5 Ruler Tool

Ruler Tool digunakan untuk mengukur dimensi lebar dan tinggi. alat ini biasanya digunakan untuk kebutuhan website seperti mengukur dan memperkirakan interface tinggi & lebar tombol, header ataupun area website lainnya. Satuan yang digunakan biasanya pixels.

Gambar 2.18 Ruler Tool

2.7.6 Note Tool

Note Tool digunakan untuk memberikan catatan pada hasil desain yang telah di buat. Catatan ini berguna sebagai pengingat dalam proses pembuatan desain ataupun dapat berguna sebagai media untuk penyampaian sebuah pesan ketika bekerja secara team.

Gambar 2.19 Note Tool

2.7.7 Hand Tool

Hand Tool digunakan untuk menggeser atau memindah bidang pandang foto atau gambar di dalam window view area atau dalam kondisi gambar sedang di perbesar (zoom in). Cukup tekan dan tahan tombol spasi untuk meminjam alat ini.

Gambar 2.20 Hand Tool

2.7.8 Zoom Tool

Zoom Tool digunakan untuk memperbesar (+) ataupun memperkecil (-) tampilan foto atau gambar. Pengaturan zoom in atau zoom out dapat dilakukan melalui option bar.

Gambar 2.21 Zoom Tool

2.7.9 Move Tool

Move Tool digunakan untuk memindahkan posisi layer dalam satu foto ataupun memindahkan sebuah foto atau layer dalam sebuah foto ke foto yang lain / foto yang berbeda.

Gambar 2.22 Move Tool

2.7.10 Rectangular Marquee Tool

Rectangular Marquee Tool digunakan untuk menyeleksi objek yang berbentuk kotak. Klik kanan diatas alat ini maka akan muncul alat lain dari kelompok marquee tool seperti Eliptical Marquee Tool, Single Row Marquee tool dan Single Column Marquee Tool.

Gambar 2.23 Rectangular Marquee Tool

2.7.11 Eliptical Marquee Tool

Eliptical Marquee Tool digunakan untuk menyeleksi objek yang berbentuk lingkaran seperti menyeleksi lingkaran mata, ban mobil dan objek lain. Alat ini masih satu kelompok dengan Rectangular Marquee Tool.

Gambar 2.24 Eliptical Marquee Tool

2.7.12 Lasso Tool

Lasso Tool digunakan untuk menyeleksi objek dengan bentuk bebas, alat ini akan membentuk seleksi sesuai dengan gerakan mouse, penggunaan alat ini sangat bergantung dengan gerakan mouse sehingga cukup sulit mengendalikan dan mencapai hasil yang maksimal.

Gambar 2.25 Lasso Tool

2.7.13 Polygonal Lasso Tool

Polygonal Lasso Tool digunakan untuk menyeleksi objek dengan bentuk bebas bersudut, alat ini membentuk seleksi melalui titik-titik point yang dibuat dengan menggunakan klik kiri mouse. Alat ini juga dapat digunakan untuk memotong dan mengubah background foto.

Gambar 2.26 Polygonal Lasso Tool

2.7.14 Magnetic Lasso Tool

Magnetic Lasso Tool digunakan untuk menyeleksi objek dengan bentuk bebas, cara kerja alat ini adalah menempel pada tepi objek yang akan dipotong ketika mouse bergerak mengelilingi tepian objek, selama proses seleksi alat ini membentuk titik-titik penghubung seleksi.

Gambar 2.27 Magnetic Lasso Tool

2.7.15 Magic Wand Tool

Magic Wand Tool digunakan untuk menyeleksi satu jenis warna (warna solid) pada foto. Alat ini dapat menyeleksi dengan pengaturan nilai tolerance atau nilai cakupan warna, semakin besar nilai tersebut maka semakin luas cakupan warna yang di seleksi.

Gambar 2.28 Magic Wand Tool

2.7.16 Spot Healing Brush

Spot Healing Brush digunakan untuk menghapus noda pada sebuah foto ataupun gambar, alat ini juga biasanya digunakan untuk menghilangkan noda di wajah ataupun menghilangkan jerawat diwajah.

Gambar 2.29 Spot Healing Brush

2.7.17 Patch Tool

Patch Tool digunakan untuk memperbaiki foto dengan cara memanfaatkan pola yang terdapat pada foto tersebut. Perbaikan dilakukan dengan menyeleksi kerusakan area kemudian menarik seleksi tersebut diatas pola target untuk menutupi area kerusakan.

Gambar 2.30 Patch Tool

2.7.18 Red Eye Tool

Red Eye Tool digunakan untuk menghilangkan efek mata merah yang timbul pada foto akibat pengambilan foto dalam kondisi gelap menyebabkan flash kamera memantulkan warna merah pembuluh darah dibalik mata.

Gambar 2.31 Red Eye Tool

2.7.19 Clone Stamp Tool

Clone Stamp Tool digunakan untuk mengambil sample dari sebuah area gambar kemudian mengkloning atau menerapkan sample tersebut untuk dilukiskan diatas

area foto lain berdasarkan sample foto yang diambil.

Gambar 2.32 Clone Stamp Tool

2.7.20 Pattern Stamp Tool

Pattern Stamp Tool digunakan untuk melukis image dengan menggunakan pola tertentu sesuai dengan pola yang dipilih pada option bar.

Gambar 2.33 Pattern Stamp Tool

2.7.21 Eraser Tool

Eraser Tool digunakan untuk menghapus foto atau gambar dalam sebuah layer eraser.

Gambar 2.34 Eraser Tool

2.7.22 Background Eraser Tool

Background Eraser Tool digunakan untuk menghapus foto atau gambar sehingga menghasilkan layer transparant pada bagian foto atau pada area yang dihapus.

Gambar 2.35 Background Eraser Tool

2.7.23 Magic Eraser Tool

Magic Eraser Tool digunakan untuk menghapus area tertentu dari sebuah foto atau gambar yang memiliki warna yang serupa (satu warna solid) menjadi transparan dengan satu kali klik pada area warna tersebut. Bisa dimanfaatkan untukmenghapus background satu warna.

Gambar 2.36 Magic Eraser Tool

2.7.24 Blur Tool

Blur Tool digunakan untuk menghaluskan atau mengaburkan area tertentu dari sebuah foto atau gambar. Dengan mengaburkan gambar akan memberikan kesan halus, blur juga dapat menyamarkan pixels gambar.

Gambar 2.37 Blur Tool

2.7.25 Sharpen Tool

Sharpen Tool digunakan untuk menajamkan area tertentu dari sebuah foto atau gambar.

Gambar 2.38 Sharpen Tool

2.7.26 Smudge Tool

Smudge Tool digunakan untuk menggosok atau mencoreng area tertentu dari sebuah foto atau gambar seolah-olah di pengaruhi oleh sapuan jari telunjuk diatas sebuah lukisan.

Gambar 2.39 Smudge Tool

2.7.27 Dodge Tool

Dodge Tool digunakan untuk menerangkan warna di area tertentu pada gambar atau foto dengan memberikan highlights pada area tertentu hingga area tersebut tampak lebih cerah atau terang.

Gambar 2.40 Dodge Tool

2.7.28 Burn Tool

Burn Tool digunakan untuk menggelapkan warna di area tertentu pada gambar atau foto dengan memberikan shadow / bayangan pada area tertentu hingga tampak lebih gelap.

Gambar 2.41 Burn Tool

2.7.29 Sponge Tool

Sponge Tool digunakan untuk mengubah saturation di area tertentu pada area gambar atau foto.

Gambar 2.42 Sponge Tool

2.7.30 Brush Tool

Brush Tool digunakan untuk melukis foto atau gambar dengan goresan kuas berdasarkan warna depan (foreground color) yang telah dipilih.

Gambar 2.43 Brush Tool

2.7.31 History Brush Tool

History Brush Tool digunakan untuk melukis image (gambar) menggunakan snapshot atau state history dari Image

Gambar 2.44 History Brush Tool

2.7.32 Art History Brush Tool

Art History Brush Tool digunakan untuk melukis image menggunakan snapshot atau state history dari image, dengan model artistik tertentu.

Gambar 2.45 Art History Brush Tool

2.7.33 Pencil Tool

Pencil Tool digunakan untuk melukis dengan efek goresan pensil.

Gambar 2.46 Pencil Tool

2.7.34 Gradient Tool

Gradient Tool digunakan untuk mengecat area yang dipilih (selected area) dengan perpaduan dua warna atau lebih. Gradient ini juga memiliki beberapa pengaturan dan tipe untuk menghasilkan efek perpaduan warna yang sesuai dengan keinginan.

Gambar 2.47 Gradient Tool

2.7.36 Path Selection Tool

Path Selection Tool digunakan untuk menyeleksi path yang telah dibuat dengan menggunakan pen tool.

Gambar 2.48 Path Selection Tool

2.7.37 Horizontal Type Tool

Horizontal Type Tool digunakan untuk membuat teks secara horizontal. Selain alat ini ada juga Vertical Type Tool untuk membuat teks secara vertical dan type mask untuk membuat teks dalam bentuk seleksi.

Gambar 2.49 Horizontal Type Tool

2.7.38 Pen Tool

Pen Tool digunakan untuk menggambar path sudut ataupun lengkung. Alat ini biasa juga digunakan untuk menyeleksi objek. Selain alat ini ada kumpulan alat lain untuk menambah titik point, mengurangi dan memodifikasi path yang telah dibuat.

Gambar 2.50 Pen Tool

2.7.35 Paint Bucket Tool

Paint Bucket Tool digunakan untuk mengecat atau mewarnai area tertentu atau

layer tertentu berdasarkan warna depan (foreground color) yang telah dipilih.

Gambar 2.51 Paint Bucket Tool

BAB 3

ANALISA DAN PEMBAHASAN

Pada bab ini penulis akan menjelaskan tentang pembahasan dan perancangan yang digunakan dalam membuat e-book bab pertama dan sub babnya. Tahapan-tahapan yang telah dilakukan untuk mendukung pembuatan aplikasi ini dimulai dari membuat struktur navigasi, mendesain tampilan cover, menulis materi, merancang interface, pembuatan interface, implementasi dan uji coba.

3.1 Struktur Navigasi

Menu Utama

Gambar 3.1 Struktur Navigasi E-book Kombinasi Permutasi

Struktur navigasi campuran (Composite) merupakan struktur yang dipakai pada penulisan ini. Dalam ebook ini terdiri dari tiga menu utama, yaitu menu bab, bantuan, dan informasi. Menu Bab di hubungkan secara hirarki dengan sub bab yang terkandung dalam materi kombinasi permutasi.

3.2 Rancangan Tampilan E-book Kombinasi Permutasi

Rancangan tampilan aplikasi merupakan hal yang sangat penting untuk menarik pengguna saat berinteraksi dengan E-book kemudahan mendapatkan informasi yang dibutuhkan dengan praktis dan efisien.

Dengan memberikan desain ini, diharapkan agar sebelum sampai pada tahap penjelasan proses pembuatan, aplikasi ini sudah dapat dilihat secara menyeluruh sehingga dapat dipahami dengan jelas apa yang akan dibahas pada proses pembuatan ebook ini.

3.2.1 Rancangan Halaman Utama

Halaman menu merupakan halaman yang ditampilkan saat pertama kali muncul di browser, dimana halaman ini terdapat delapan buah tombol yaitu language, music, zoom out, zoom in, play, first page, next page, previous page dan last page, ditambah dua label yaitu label judul dan text. ( pada gambar 3.2 )

Gambar 3.2 Rancangan Halaman Utama

Pada halaman utama yang ditampilkan pertama kali pada browser, terdapat berbagai macam button dan label. Berikut ini akan dijelaskan fungsi dari berbagai tools dari gambar 3.2 berikut :

1). label 1, berisi tulisan dari judul ebook yaitu “ Kombinasi Permutasi”

2). b1, berarti button 1, yaitu button yang berfungsi mengaktifkan dan

menonaktifkan suara pada ebook.

3). b2, berarti button 2, yaitu button yang berfungsi memperbesar tampilan ebook

4). b3, berarti button 3, yaitu button yang berfungsi memperkecil tampilan ebook

5). b4, berarti button 3, yaitu button yang berfungsi mengatur bahasa pada ebook

6). b5, berarti button 5, yaitu button yang berfungsi membuat ebook membuka

halaman ecara otomatis, dengan efek flip dan bersuara.

7). b6, berarti button 6, yaitu button yang berfungsi membuat ebook menampilkan

halaman awal, dengan efek flip dan bersuara.

8). b7, berarti button 8, yaitu button yang berfungsi membuat ebook menampilkan

halaman sebelumnya,.

9). b8, berarti button 8, yaitu button yang berfungsi membuat ebook menampilkan

halaman selanjutnya, dengan efek flip dan bersuara.

10). b9, berarti button 9, yaitu button yang berfungsi membuat ebook menampilkan

halaman paling akhir, dengan efek flip dan bersuara.

11). b10, berarti button 10, yaitu button yang berfungsi membuat ebook

menampilkan halaman Full screen.

3.2.2 Rancangan Halaman Menu Utama dan Menu Bab

Didalam ebook kombinasi permutasi ini terdapat dua Menu, yang pertama adalah menu utama dan yang kedua adalah menu bab. Menu utama adalah menu yang terdiri dari sub menu yaitu menu bab, informasi dan bantuan. sedangkan menu bab adalah menu yang terdiri dari enam sub menu yang berisi materi kombinasi permutasi.

3.2.2.1 Halaman Menu Utama

Di dalam rancangan halaman menu utama, pengguna akan disuguhkan tampilan yang menawarkan menu dari ebook kombinasi permutasi. Pada kotak berlabel MENU berisi tulisan dari judul halaman menu utama. Kotak berlabel Menu Bab adalah tombol yang berfungsi untuk menuju ke halaman dimana Menu Bab berada. Kotak berlabel Informasi adalah tombol yang berfungsi untuk menuju ke halaman dimana halaman informasi berada. Kotak berlabel bantuan adalah tombol yang berfungsi untuk menuju ke halaman dimana halaman bantuan berada. Berikut ini merupakan tampilan rancangan pada halaman menu utama yang ditampilkan dalam gambar 3.3 berikut :

Gambar 3.3 Rancangan Halaman Menu Utama

3.2.2.2 Halaman Menu Bab

Di dalam rancangan halaman menu bab, pengguna akan disuguhkan tampilan yang menawarkan menu dari materi yang terkandung dalam buku kombinasi permutasi. Pada kotak berlabel b10 berisi tulisan BAB1, untuk menuju ke halaman dimana Bab 1 berada. Kotak berlabel b11, berisi tulisan BAB 2 untuk menuju ke halaman dimana Bab 2 berada. Kotak berlabel b12 berisi tulisan BAB 3 untuk menuju ke halaman dimana Bab 3 berada. Kotak berlabel b13 berisi tulisan BAB 4 untuk menuju ke halaman dimana Bab 4 berada. Kotak berlabelb 14 berisi tulisan BAB 5 untuk menuju ke halaman dimana Bab 5 berada. Kotak berlabel button berisi tulisan MENU untuk menuju ke halaman dimana MENU berada Berikut ini merupakan tampilan rancangan pada halaman menu bab yang ditampilkan dalam gambar 3.4 berikut :

Gambar 3.4 Rancangan Halaman Menu Bab

3.2.2.3 Rancangan Halaman Judul Bab

Gambar 3.5 Rancangan Judul Bab

Pada rancangan halaman judul bab ini, pengguna akan mendapatkan petunjuk untuk menggunakan aplikasi ini. Pada halaman judul bab, kotak berlabel Text berisi tulisan mengenai judul bab yang sedang dibaca.

3.2.2.4 Rancangan Halaman Informasi

Halaman ini dirancang dengan terdiri dari background sebagai latar belakang halaman, pada kotak berlabel Judul berisi tulisan mengenai judul dari halaman informasi. Pada kotak berlabel Text berisi tulisan mengenai keterangan pembuat e-book dan juga penulis buku. Kotak berlabel Button berisi tulisan MENU untuk menuju halaman menu utama . Berikut ini adalah rancangan halaman Informasi pada gambar 3.6.

Gambar 3.6 Rancangan Halaman Informasi

3.2.2.5 Rancangan Halaman Bantuan

Gambar 3.7 Rancangan Halaman Bantuan

Tampilan halaman informasi kotak berlabel G yang berisi gambar yang berhubungan dengan penjelasan organ. Kotak berlabel penjelasan yang berisi tulisan mengenai penjelasan mengenai cara- cara menggunakan ebook. Rancangan tampilan halaman bantuan bisa dilihat seperti gambar 3.7 berikut :

3.3 Langkah-Langkah Pembuatan Aplikasi

Pada bagian ini penulis akan menjelaskan langkah-langkah pembuatan ebook, setelah melalui tahap perancangan halaman ebook kemudian langkah berikutnya adalah pembuatan ebook sesuai rancangan tampilan yang telah dibuat sebelumnya.

Tahap pembuatan Ebook dibagi menjadi empat bagian yaitu pembuatan desain cover baik itu cover menu dan judul. Penulisan materi, mengkonversi file .doc ke file .pdf, pembuatan animasi, dan pembuatan e-book pada Kvisoft Maker. Pembuatan cover dibuat menggunakan perangkat lunak Adobe Photoshop Cs3. Penulisan materi dilakukan pada aplikasi Microsoft Word 2010.

3.3.1 Pembuatan Desain Cover

Langkah pertama dalam pembuatan desain cover adalah membuka software Adobe Photoshop Cs3, ukuran yang digunakan dalam pembuatan objek adalah ukuran kertas A4 dengan resolusi 210 dan 297 mm dengan warna dasar putih.

Gambar 3.8 Projek Baru pada Adobe Photoshop Cs3.

Selanjutnya memasukan background yang sudah di unduh dari [9]. Gambar yang sudah di unduh kemudian di lakukan penambahan text bertuliskan “KOMBINASI PERMUTASI” dengan jenis huruf KG Flavor And Frames Six diberikan efek putih dan pita pada latarnya.

Gambar 3.9 Penambahan Background dan Text

Langkah selanjutnya adalah penambahan tulisan “UNIVERSITAS GUNADARMA“ dan “DILENGKAPI ANIMASI“ pada bawah background projek seperti gambar 3.10 berikut.

Gambar 3.10 Penambahan judul tulisan pada projek.

Kemudian untuk bagian pelengkap dari cover di tambahkan tulisan rumus-rumus matematika permutasi dan kombinasi. Setelah selesai mendesain, file disimpan dengan format .jpg, dengan cara klik File kemudian Save as pilih format .JPG lalu Save. Hasil akhir desain cover ebook bisa dilihat seperti gambar 3.11 berikut.

Gambar 3.11 Hasil Desain Cover E-book

Selanjutnya dilakukan perancangan cover menu. Background menu, diunduh dari [10]. File yang sudah di unduh kemudian di lakukan penambahan text bertuliskan “MENU” Setelah selesai mendesain, file disimpan dengan format .jpg, dengan cara klik File kemudian Save as, pilih format .JPG dan Save. Hasil akhir desain bisa dilihat seperti gambar 3.12 berikut :

Gambar 3.12 Hasil Desain Cover Menu

Untuk melengkapi tampilan cover pada menu, beberapa gambar akan di input yang nantinya akan berfungsi sebagai button yang apabila di tekan akan menjalankan perintah sesuai dengan fungsinya. Software Adobe Photoshop masih digunakan untuk mendesain gambar yang nantinya akan dijadikan button. Langkah pertama dalam membuat button adalah membuka projek baru, kemudian masukan icon layar Apple Mac yang sudah di unduh dari [11].

Gambar 3.13 Pembuatan Tombol dengan Gambar Layar

Setelah gambar di tambahkan kemudian beri warna ungu pada image lalu di beri efekshadow. Hasil dapat dilihat pada gambar 3.14 berikut:

Gambar 3.14 Icon yang diberikan Shadow

Gambar yang sudah diwarnai kemudian ditambahkan text “Menu Bab” seperti gambar 3.15 berikut :

Gambar 3.15 Penambahan Text pada Shape

Setelah selesai melakukan pembuatan desain untuk tombol “MENU BAB”, kemudian di buat lagi tombol yang lainya dengan menggunakan cara yang sama seperti cara pada saat pembuatan tombol “MENU BAB”. Desain yang sudah jadi kemudian di simpan dalam format .png.

Hasil akhir desain keseluruhan button akan nampak pada gambar 3.16 berikut:

Gambar 3.16 Hasil Desain Button pada Menu

Selanjutnya dilakukan perancangan cover menu bab, Untuk background menu, diunduh dari [10] :

Gambar 3.17 Background yang Digunakan Untuk Halaman Menu Bab

Gambar yang sudah di unduh kemudian di beri sedikit tambahan text bertuliskan “ MENU BAB “. Hasil akhir desain bisa dilihat pada gambar 3.18 berikut .

Gambar 3.18 Hasil Desain Cover Menu Bab

Setelah selesai mendesain, file disimpan dengan format .jpg, dengan cara klik File lalu Save as kemudian pilih format .JPG dan Save.

Pada bagian halaman menu bab dilengkapi dengan enam tombol, setiap tombol pada ebook ini di desain dengan software Adobe Photoshop. Untuk gambar yang akan dijadikan tombol pada menu bab di unduh dari [12].

Gambar 3.19 Desain Tombol pada Menu Bab

Gambar yang sudah di unduh kemudian di tambahkan text sesuai dengan judul bab masing masing dan di beri warna yang berbeda- beda. Hasil desain tombol untuk menu bab1 sampai bab 5 dapat dilihat pada gambar 3.20 berikut:

Gambar 3.20 Desain Tombol Bab 1 sampai Bab 5

Setelah selesai mendesain, file disimpan dengan format .png, dengan cara klik File lalu Save as kemudian pilih format .PNG dan Save. Selanjutnya dilakukan perancangan halaman informasi dan bantuan. Untuk background informasi dan bantuan di unduh dari [10].

Gambar 3.21 Background halaman informasi dan bantuan

Gambar yang sudah di unduh kemudian di tambahkan text sesuai dengan judul halaman masing. Hasil desain halaman informasi dan bantuan dapat dilihat pada gambar 3.22 berikut:

Gambar 3.22 Desain Halaman Informasi dan Bantuan

Setelah selesai mendesain, file disimpan dengan format .jpg, dengan cara klik File lalu Save as kemudian pilih format .JPG dan Save. Bagian awal dari sebuah bab akan di buat sederhana , bagian ini dinamakan judul bab. Hasil akhir desain judul bab dari bab 1 sampai bab 5 bisa dilihat pada gambar 3.23 berikut.

Gambar 3.23 Desain Cover Judul Bab 1 sampai Bab 5

3.3.2 Persiapan Materi

Materi diambil dari draf file yang sudah disediakan [1] tetapi perlu pengeditan di beberapa tempat pada Microsoft Word 2010, penulis menggunakan pengaturan seperti gambar 3.24 berikut.

Gambar 3.24 Tampilan Pengaturan pada Microsoft Word

Penulisan materi matematika kombinasi dan permutasi ini dikerjakan sama seperti menulis artikel lainya, tentunya dengan di pandu dengan petunjuk penulisan yang benar. Dalam penulisan materi kombinasi dan permutasi ini banyak dijumpai rumus- rumus matematika, untuk menulis rumus matematika pada Microsoft word 2010 adalah klik Insert lalu Equation kemudian pilih rumus mana yang akan digunakan. Untuk melihat hasil dari penulisan rumus menggunakan equation dapat dilihat pada gambar 3.25 berikut.

Gambar 3.25 Menulis Rumus Menggunakan Equation

Agar lebih menarik materi ebook yang masih dalam bentuk .doc perlu di tambahkan dengan cover ebook maupun cover menu yang sebelumnya sudah dibuat pada Adobe Photoshop. Untuk memasukan file .jpg ke Microsoft Word, klik insert kemudian Picture lalu pilih gambar mana yang akan di masukan dan insert. Hasil akhir penambahan gambar pada materi dapat dilihat pada gambar 3.26 berikut :

Gambar 3.26 Insert Gambar pada Microsoft Word

Setelah semua materi selesai di ketik beserta rumus- rumus dan cover nya. Kemudian materi di save dahulu dalam format .doc, untuk menyimpan file pada Microsoft word 2010, klik window kemudian save lalu beri nama file , pilih folder penyimpanan dan save. Cara yang lebih cepat adalah klik icon disket pada toolbar lalu beri nama file kemudian pilih folder penyimpanan dan save.

Gambar 3.27 Penulisan Materi pada Microsoft Word

3.3.3 Pengkonversian file

Pada pengkonversian file ini, penulis menggunakan plugin PDF or XPS. Plug in teresebut berfungsi menyimpan file yang sebelumnya berekstensi .doc menjadi Pdf.

Gambar 3.28 PlugIn PDF or XPS pada Microsof Office 2010

Setelah Plug in selesai terpasang, selanjutnya buka file yang akan di simpan ke dalam ekstensi .Pdf. Langkah terakhir dalam proses pengkonversian file adalah klik icon Window lalu Save As kemudian pilih PDF or XPS , beri nama file dan Publish.

3.3.4 Pembuatan Desain Bola dan Kotak Penampung Bola

Dalam membuat desain Pada pembuatan bola dan kotak penampung bola digunakan Software Adobe Photoshop CS3.

1). Langkah pertama dalam pembuatan bola dan kotak penampung bola adalah membuka software Adobe Photoshop Cs3, ukuran kertas yang digunakan dalam pembuatan objek adalah A4 dengan resolusi 8.268 inch x 11.693 inch dengan warna dasar putih transparan.

Gambar 3.29 Tampilan Lembar Kerja Baru pada Photoshop Cs3

2). Langkah selanjutnya adalah membuat tiga bola dengan warna yang berbeda dan caranya adalah pertama mengkilk kiri pada icon Elliptical Marquee Tool dan membuatnya menjadi bulatan, setelah itu diberikan warna merah dan biru dengan efek drop shadow serta gradient yang terdapat pada blending option setelah selesai di simpan dalam format png. Hasil dari pembuatan bola dapat dilihat pada gambar 3.30 berikut.

Gambar 3.30 Hasil Pembuatan Tiga Bola

3). Langkah selanjutnya pembuatan kotak penampung bola, langkah pertama dengan memasukan gambar yang di unduh dari [13] gambar yang sudah di unduh kemudian diberikan Text penomoran pada kotak penampung dengan urutan 1,2,4 dan 4 setelah selesai di simpan dalam format png. Hasil dari pembuatan kotak penampung bola dapat dilihat pada gambar 3.31:

Gambar 3.31 Pembuatan Kotak Penampung Bola

3.3.5 Pembuatan Animasi

Dalam membuat animasi interaktif digunakan aplikasi Adobe Flash Profesional CS3. Animasi ditambahkan supaya pembaca dapat mengerti bagaimana langkah- lankah dalam mengerjakan soal yang sudah disediakan. Berikut ini adalah langkah- lankah pembuatan animasi menggunakan aplikasi Adobe Flash Professional CS3 :

1.) Aplikasi Adobe Flash Profesional dibuka, kemudian untuk membuat projek baru dipilih menu Create New dan pilih ActionScript 2.0

Gambar 3.32 Tampilan Awal Adobe Flash Profesional CS3

2.) Dalam animasi yang akan dibuat, digunakan gambar sebagai background. Gambar yang digunakan adalah gambar yang di unduh dari [8]. Untuk memasukan gambar ke dalam projek adalah dengan memilih menu File kemudian dipilih menu import to library.

Gambar 3.33 Memasukan Gambar ke Projek

3.) Gambar yang sudah di import ke dalam library kemudian di drag ke area projek dan diatur sama rata.

Gambar 3.34 Latar Background

4.) Kemudian ditambahkan teks yang bertuliskan Contoh “1.10:“ dengan mengkilik kiri pada Text Tool dan di beri warna hitam tebal.

Gambar 3.35 Scene Cover yang Sudah diberikan Teks “ Contoh 1.10“

5.) Scene isi yang telah diberi background, kemudian di tambahkan tiga buah tombol. Tombol yang di tambahkan adalah tombol play, pause dan stop. Tombol play berfungsi untuk memainkan animasi, tombol pause berfunsi untuk membehentikan sementara animasi yang berjalan, dan tombol stop berfungsi menghentikan animasi.

Gambar 3.36 Scene isi yang telah ditambahkan tombol Play, Pause dan Stop

Untuk membuat ketiga tombol berfungsi sesuai perintah, maka ketiga tombol harus diberi script action. Untuk menambahkan script action adalah dengan cara klik area tombol yang akan diberi script, kemudian dipilih menu action. Setelah itu diberi perintah atau script action seperti gambar 3.37 berikut.

Gambar 3. 37 Script Action untuk Tombol Play

Gambar 3.38 Script Action untuk Tombol Pause

Gambar 3.39 Script Action untuk Tombol Stop

6.) Scene yang sudah diberi tombol kemudian dilanjutkan dengan memasukan gambar bola serta kotak penampung bola dan mengatur munculnya ”Cara :1” selanjutnya muncul animasi bola, dimana jatuhnya bola merah pertama ke kotak angka satu, bolah merah kedua jatuh ke kotak nomer dua dan bola biru ke tiga jatuh ke kotak nomor tiga. Efek jatuhnya bola satu- persatu dengan jarak 16 frame sampai dengan 20 frame permunculnya bola. Efek jatuhnya bola sengaja di munculkan satu-persatu supaya pembaca dapat memahami banyaknya cara bola masuk ke dalam kotak, demikian juga dengan “Cara :2” hingga Cara : 12.

Gambar 3.40 Pengaturan Jatuhnya Bola ke Dalam Kotak Penampung

7). Saat animasi berjalan diberi tambahan efek bola jatuh ke dalam kotak . Gambar bola yang sudah di impor ke dalam library kemudian di drag ke area yang akan di pasang. Untuk membuatnya menjadi animasi bergerak adalah dengan cara klik kanan pada layer bola pilih Create Motion Twin sesuaikan dengan panjang durasi jatuhnya bola kemudian klik kanan dan Insert Key Frame, lakukan cara yang sama dengan bola lainnya dengan nomor kotak yang berbeda.

Gambar 3.41 Masuknya Bola ke Dalam Kotak

8). Supaya bola dapat masuk ke dalam kotak dengan benar dilakukan penyusunan layer yang terdiri dari layer 1 dengan nama kotak bawah, layer 2 dengan nama bola 3, layer 3 dengan nama bola 2, layer 4 dengan nama bola , layer 5 dengan nama kotak atas, layer 6 dengan nama scene 3, layer 7 dengan nama background dan layer 8 dengan nama scene 1.

Gambar 3.42 Susunan Layer Animasi

9). Scene yang memunculkan “Cara :2” diberikan efek bola merah pertama jatuh ke kotak pertama, efek bola merah ke dua jatuh ke kotak nomor dua, efek bola biru ke tiga jatuh ke kotak nomor empat.

Gambar 3.43 Susunan Jatuhnya Bola pada Cara :2.

10). Scene selanjutnya akan menampilkan jatuhnya bola ke kotak penampung bola dari Cara : 3 sampai dengan Cara :12. Dimana hasil jatuhnya bola ke kotak dapat terlihat pada gambar 3.44 berikut.

Gambar 3.44 Hasil Jatunya Bola dari Cara :1 sampai Cara :12.

3.3.6 Pembuatan Ebook pada Kvisoft Flipbook Maker

Aplikasi Kvisoft Flipbook maker pada desktop dibuka, selanjutnya dapat dibuat projek baru dengan cara klik Import lalu pilih file ber format .pdf kemudian open , atur resolusi, kualitas dan ukuran ebook sesuai keinginan dan Ok.

Gambar 3.45 Pembuatan Projek Baru Kvisoft Flipbook Maker

3.3.7 Pembuatan Halaman Menu

1.) Untuk membuat dan mengedit halaman dari ebook pada software Kvisoft Flipbook Maker, penulis menggunakan tool Edit Page pada toolbar. Pada pembuatan halaman menu, penulis hanya menambahkan tiga file berformat .png yang nantinya akan dijadikan tombol yang memiliki fungsi jika ditekan. Untuk proses penginputan file .png, Add Image dipilih kemudian zona gambar diseleksi, resolusi dan fungsi diatur dan ok . Untuk pengaturan resolusi dan fungsi akan di jelaskan pada gambar 3.45 berikut.

Gambar 3.46 Pengaturan Tombol Menu Bab

Gambar 3.47 Pengaturan Tombol Informasi

Gambar 3.48 Pengaturan Tombol Bantuan

2.) Setelah semua gambar berhasil di input ke dalam halaman menu, dan disesuaikan dengan resolusi dan fungsi nya sebagai button seperti gambar 3.48 diatas. Hasil akhir dari penginputan gambar akan nampak seperti gambar 3.49 berikut :

Gambar 3.49 Page Edit Halaman Menu

3.3.7.1 Pembuatan Halaman Menu Bab

Pembuatan halaman Menu Bab ini terdapat enam tombol yaitu Bab1 (fungsi kombinatorik), Bab2 (fungsi pembangkit), Bab3 (relasi rekursif), Bab4 (grup & ring), Bab5 (pembangkit objek kombinatorik). Dalam pembuatan halaman Menu Bab ini, langkah yang dilakukan hampir sama seperti saat membuat halaman Menu. yang pertama dipilih dahulu halaman yang akan di edit dalam tool Page Edit.

Gambar 3.50 Pembuatan Halaman Menu Materi

Input gambar berformat .png dengan tool Add Image, kemudian seleksi zona yang akan di pasang gambar. Untuk pengaturan gambar yang akan menjadi tombol akan di jelaskan pada gambar berikut .

Gambar 3.51 Pengaturan Tombol Bab1 dan Bab2

Gambar 3.52 Pengaturan Tombol Bab3 dan Bab4

Gambar 3.53 Pengaturan Tombol Bab5

Setelah semua gambar di input dan di sesuaikan pengaturannya seperti gambar diatas, hasil akhir dari pembuatan halaman Menu bab akan terlihat seperti gambar 3.54 berikut.

Gambar 3.54 Tampilan Halaman Menu Bab

3.3.7.2 Pembuatan Halaman Judul Bab

1). Pilih halaman yang akan di edit pada tool Edit Page, kemudian pilih tool Add Image untuk memasukan gambar ke lembar Edit Page. Resolusi dan fungsi dari tombol yang sudah di input diatur seperti gambar 3.55 berikut.

Gambar 3.55 Pengaturan Tombol Menu

2). Langkah nomor satu diatas dilakukan kepada setiap halaman judul bab, maka hasil akhir dari desain halaman judul bab akan di tampilkan pada gambar 3.56 berikut.

Gambar 3.56 Tampilan Halaman Judul Bab

3.3.8 Memasukan Animasi ke Ebook

Pada aplikasi Kvisoft Flipbook maker, terdapat fasilitas untuk memasukan file animasi. File animasi yang akan dimasukan dalam ebook Kombinasi Permutasi ini adalah animasi pengerjaan contoh soal yang berformat .swf.

1) Langkah pertama dalam memasukan animasi adalah memilih menu Page Edit. Kemudian pilih menu add SWF, pada bagian kiri slide. Add SWF berarti memasukan file animasi berformat .swf.

Gambar 3.57 Dialog pada Menu Add SWF

Setelah muncul dialog Add SWF, maka pada kolom File Name di isi dengan nama file animasi yang sudah disimpan sebelumya.

Gambar 3.58 Ebook yang Sudah di Masukan Animasi

3.3.9 Mendesain Template Ebook

Tampilan ebook di desain sedemikian rupa agar terlihat dinamis dan menarik, maka dari itu di lakukan pengaturan pada template yang sudah disediakan oleh software Kvisoft Flipbook Maker, agar lebih sederhana dan juga dinamis.

Langkah pertama dalam melakukan pengaturan template, mengklik Menu Design pada menu bar kemudian dipilih Style , Advance setting dan dipilih main setting kemudian pengaturan diatur seperti gambar 3.59 berikut.

Gambar 3.59 Pengaturan pada Main Setting

Untuk mengatur tombol navigasi supaya lebih sederhana dan sesuai dengan pemakaian maka perlu di lakukan pengaturan pada Button Setting , Menu Design pada menu bar di klik. kemudian menu Style , Advance setting , Button setting diatur seperti gambar 3.60 berikut.

Gambar 3.60 Pengaturan pada Button Setting

Setelah Langkah- langkah nomor satu dan dua dilakukan, maka tampilan dari template ebook akan terlihat seperti gambar 3.61 berikut.

Gambar 3.61 Template dan Button pada Ebook

3.3.10 Publish Ebook Menjadi File HTML

Ebook yang sudah di atur sedemikian rupa, mulai dari main setting hingga button setting akan dilanjutkan ke langkah terakhir, yaitu langkah publish. publish yaitu langkah dimana ebook yang masih dalam format file .pb akan di rubah menjadi format yang berbeda, untuk format ebook yang akan penulis buat adalah format file HTML. Format HTML adalah format ebook yang bisa dibuka di berbagai internet browser seperti Mozilla Firefox, Google Chrome, Opera dan Internet Explorer.

Tindakan yang dilakukan pertama kali saat akan mem publish ebook adalah dengan meng klik menu Publish pada menu bar dan pilih HTML, kemudian akan muncul dialog dan setiap kolom di isi seperti gambar 3.62 berikut.

Gambar 3.62 Pengaturan Output pada Ebook

Setelah semua pengaturan selesai, maka tombol start di klik dan proses akan berlangsung hingga selesai.

Gambar 3.63 Tombol Start untuk Memulai Proses Publish

3.4 Implementasi

Pada bagian ini merupakan tahap pengujian yang akan menampilkan ebook di internet browser laptop. Klik View it pada gambar 3.57 berikut.

Gambar 3.64 Dialog Setelah Proses Publish selesai

Gambar 3.65 Tampilan pada Browser

Tampilan gambar 3.65 di atas merupakan tampilan utama ebook yang dijalankan pada browser. Di dalam halaman utama tersebut terdapat sepuluh tombol diantaranya language, sound, zoom out, zoom in, full screen, first page, previous page, play, next page dan last page.

Gambar 3.66 Tampilan Halaman Menu dan Menu Materi

Tampilan gambar 3.66 diatas merupakan tampilan Menu dan menu bab, didalam tampilan menu terdapat tiga buah tombol diantaranya menu bab, informasi dan bantuan. Pada tampilan menu bab terdapat enam tombol diantaranya bab1, bab2, bab3, bab4, bab5 dan menu yang apabila di klik akan berfungsi sesuai dengan fungsinya masing- masing.

Gambar 3.67 Tampilan Informasi dan Bantuan

Tampilan gambar 3.67 diatas adalah tampilan informasi berupa teks mengenai ebook yang sedang dibaca.

Selanjutnya adalah tampilan informasi bantuan dengan mengklik tombol bantuan yang terdapat pada menu. Halaman ini menyediakan informasi untuk pengguna dalam menggunakan ebook kombinasi permutasi.

Gambar 3.68 Tampilan Halaman Judul Bab 2 dan Isi Materi

Berikutnya adalah tampilan halaman judul bab disertai dengan isi dari materi yang sedang dibaca dalam ebook Kombinasi Permutasi.

3.5 Spesifikasi Minimum Laptop/Smartphone

Untuk dapat menjalankan ebook kombinasi permutasi ini membutuhkan spesifikasi minimal yang sangat sederhana yang terdapat pada laptop dan smartphone, spesifikasi tersebut hampir dimiliki oleh semua perangkat laptop dan smartphone yang memiliki internet browser dan sudah terinstal adobe flash player, dan untuk smartphone harus sudah ter install adobe air .

3.6 Pengujian Aplikasi

Pengujian aplikasi dilakukan pada dua buah laptop, satu buah smartphone dan internet browser yang berbeda. Pengujian ini dilakukan untuk mengetahui apakah tampilan efek transisi perpindahan halaman, pemutaran animasi, suara efek, dan fungsi tombol berjalan sempurna atau tidak, efek transisi halaman dikatakan sempurna jika efeknya berjalan lancar disertai suara dan tidak sempurna jika efek transisi tersendat sendat dan suara efeknya tidak ada. Animasi dikatakan sempurna jika pergerakan animasi dan tombol nya berjalan sesuai skema. dan dikatakan tidak sempurna apabila pergerakan dan fungsi tombol tidak sesuai dengan skema yang sudah ditentukan. Berikut ini adalah daftar perangkat komputer dan internet browser yang telah digunakan dalam uji coba ebook Kombinasi Permutasi ini.

Tabel 3.1 : Perangkat dan Spesifikasi yang Digunakan

Perangkat	Spesifikasi
Perangkat	OS	CPU
Laptop Acer Aspire 4920	Windows 7	Intel Core Duo, 1,8 GHz. RAM 2 GB
Laptop HP Pav Vtx	Windows 8.1	Intel Core i5, 2,4 GHz. RAM 4GB
Smartphone LG G3 Stylus	Android 5.0	Mediatek 1,2 GHz Quad Core. RAM 1GB

Tabel 3.2 : Jenis Internet Browser yang Digunakan

Internet Browser dan Flash Player	Versi
Mozilla Firefox	22.0
Google Chrome	45.0
Oprea Blink	24.0
Internet Explorer	11.0
Flash Player	9.0

3.7 Hasil Pengujian

Hasil dari pengujian yang dilakukan di dua laptop dan satu smartphone, untuk menguji efek transisi ebook, pemutaran animasi, pemutaran efek suara, dan fungsi tombol navigasi adalah sebagai berikut:

1.) Pengujian Efek Transisi Halaman Ebook

Tabel 3.3 : Hasil Efek Transisi Halaman

Internet Browser / Flash Player	Efek Transisi
Internet Browser / Flash Player	Sempurna	Tidak Sempurna
Mozilla Firefox	Ya	Tidak
Google Chrome	Ya	Tidak
Oprea Blink	Ya	Tidak
Internet Explorer	Ya	Tidak
Flash Player	Tidak	Ya

2.) Pengujian Animasi

Tabel 3.4 : Hasil Pemutaran Animasi

Internet Browser / Flash Player	Efek Transisi
Internet Browser / Flash Player	Sempurna	Tidak Sempurna
Mozilla Firefox	Ya	Tidak
Google Chrome	Ya	Tidak
Oprea Blink	Tidak	Ya
Internet Explorer	Ya	Tidak
Flash Player	Tidak	Ya

3.) Pengujian Efek Suara

Tabel 3.5 : Hasil Pemutaran Efek Suara

Internet Browser / Flash Player	Efek Transisi
Internet Browser / Flash Player	Sempurna	Tidak Sempurna
Mozilla Firefox	Ya	Tidak
Google Chrome	Ya	Tidak
Oprea Blink	Ya	Tidak
Internet Explorer	Ya	Tidak
Flash Player	Tidak	Ya

4.) Pengujian Fungsi Tombol Navigasi

Tabel 3.6 : Hasil Pengujian Fungsi Tombol Navigasi

Internet Browser / Flash Player	Efek Transisi
Internet Browser / Flash Player	Sempurna	Tidak Sempurna
Mozilla Firefox	Ya	Tidak
Google Chrome	Ya	Tidak
Oprea Blink	Ya	Tidak
Internet Explorer	Ya	Tidak
Flash Player	Tidak	Ya

ESA YUNUS

Thursday, June 30, 2016

Tugas 4 Bahasa Indonesia 2 Jurnal