View
217
Download
0
Category
Preview:
Citation preview
BAB 2
LANDASAN TEORI
2.1 Rekayasa Perangkat Lunak
Menurut Pressman (2010, p.13), rekayasa perangkat lunak adalah sebuah
teknologi yang terdiri dari beberapa lapisan atau layer, antara lain adalah:
1 Fokus pada kualitas (A Quality Focus)
Pada rekayasa piranti lunak, kualitas merupakan nilai dari suatu
marketing yang sangat berpengaruh terhadap pencitraan dari suatu produk
ataupun barang. Dengan berfokus pada kualitas yang terbaik untuk para
pembeli ataupun pemakai, akan memberikan branding tersendiri dari suatu
produk ataupun barang (Pressman, 2010, p.13).
2 Proses (Process)
Proses merupakan dasar dari rekayasa perangkat lunak. Proses
merupakan bagian terpenting dari lapisan rekayasa perangkat lunak karena
mendefinisikan sebuah kerangka kerja untuk satu set key process area
(KPAs). KPAs membentuk dasar bagi kontrol manajemen proyek
perangkat lunak untuk memanage proyek yang dikerjakan dan melakukan
penanganan yang terbaik untuk tim sehingga memberikan hasil yang
terbaik untuk pengguna (Pressman, 2010, p.13).
7
3 Metode (Method)
Metode merupakan pendamping dari proses pada rekayasa
perangkat lunak. Dengan bersama – sama proses dan berfokus pada
kualitas produk akan memberikan hasil yang terbaik untuk pengguna.
Metode mencakup analisa kebutuhan (requirement analysis), memodelkan
desain (design modelling), konstruksi program (program contruction),
pengujian (testing) dan dukungan (support) (Pressman, 2010, p.14).
4 Alat Bantu (Tools)
Alat Bantu merupakan pendukung terpenting yang sangat vital
keberadaanya. Dengan adanya alat bantu yang disesuaikan dengan tujuan
proyek, dapat mempermudah dan mempercepat tercapainya sebuah hasil
yang diharapkan oleh tim pengembang (Pressman, 2010, p.14).
Gambar 2.1 Lapisan Rekayasa Piranti Lunak
(Sumber: Pressman, 2010)
8
2.1 Kerangka Proses (Process Framework)
Sebuah kerangka proses (process framework) merupakan dasar
dalam proses perangkat lunak dengan melakukan identifikasi aktivitas –
aktivitas yang sudah ditetapkan dan menjadi fondasi awal dalam
pembuatan suatu perangkat lunak yang disepakati oleh tim. Berikut
kerangka proses (process framework) yang berlaku pada sebagian proyek
menurut Pressman (Pressman, 2010, p.14):
1 Komunikasi (Communication)
Aktivitas kerangka kerja ini merupakan tahap awal dari
keseluruhan kerangka proses yang sangat vital bagi perkembangan
suatu perangkat lunak. Pada fase komunikasi, diperlukan
pengetahuan yang baik terhadap kebutuhan – kebutuhan pengguna.
Dengan pengertian dan pengetahuan yang baik terhadap kebutuhan
pengguna, fase komunikasi akan berjalan dengan baik dan
perkembangan suatu perangkat lunak berjalan lebih cepat atau
sesuai dengan schedule (Pressman, 2010, p.15).
2 Perencanaan (Planning)
Aktivitas kerangka kerja ini merupakan tahap lanjutan dari
komunikasi. Aktivitas ini terbentuk berdasarkan komunikasi yang
baik antara pengguna dan anggota tim. Aktivitas ini meliputi
perencanaan kerja, schedule, tugas dan kewajiban anggota tim,
sumber daya yang akan dibutuhkan, produk yang akan dihasilkan,
dll. Dengan adanya perencanaan yang baik dan matang, akan
9
mempercepat terwujudnya perangkat lunak yang diinginkan dan
sesuai dengan kebutuhan pengguna (Pressman, 2010, p.15).
3 Permodelan (Modelling)
Aktivitas kerangka kerja ini merupakan bagian yang sangat
terpenting dari suatu proyek perangkat lunak. Permodelan yang baik
dan dilihat berdasarkan sisi pengguna, akan menghasilkan hasil
yang baik dan sesuai dengan kebutuhan pengguna. Permodelan
sangat penting keberadaanya dalam suatu proyek perangkat lunak.
Karena akan berdampak terhadap hasil dari perangkat lunak yang
nantinya dibuat (Pressman, 2010, p.15).
4 Konstruksi (Construction)
Aktivitas kerangka kerja ini merupakan tahap
perkembangan dari modeling yang baik. Pada tahapan ini,
digabungkannya kegiatan coding dan pengujian (testing). Pada
aktivitas ini, sangat diperlukan kerjasama yang baik dari anggota
tim dalam melakukan kolaborasi tugas dan tanggung jawab yang
dipegang. Dengan kolaborasi yang baik, akan menghasilkan hasil
perangkat lunak yang baik (Pressman, 2010, p.15).
5 Penyebaran (Deployment)
Aktivitas kerangka kerja ini merupakan tahap terakhir dari
serangkaian kerangka proses (process framework). Pada tahap
penyebaran ini, dengan hasil yang sudah siap berdasarkan tahap
konstruksi (construction), perangkat lunak diberikan ke client
sesuai dengan kebutuhan dan keinginanya pada tahap komunikasi.10
2.2 Model Proses Prototyping
Menurut Pressman (2010, p. 43), prototyping merupakan
evolutionary process model, yang merupakan pengembangan dari waterfall
model dimana pada prototyping. Suatu proses bisa dilakukan secara timbal
balik namun sesuai dengan proses yang dipakai pada waterfall model. Pada
tiap akhir proses deployment, tim dapat kembali ke proses communication
untuk membicarakan kembali tentang perkembangan piranti lunak yang
sedang dibuat.
Gambar 2.2 Proses Prototyping Model
(Sumber: Pressman, 2010)
11
Penjelasan dari proses tersebut antara lain:
1. Pada proses communication dengan model prototyping,
pengguna dan tim melakukan diskusi mengenai beberapa hal
yang penting bagi terwujudnya perangkat lunak yang
dibutuhkan oleh pengguna. Pengguna dan tim melakukan
diskusi mengenai kebutuhan – kebutuhan dasar dari suatu
proyek, semisal price, proses bisnis suatu perusahaan, hasil
yang diinginkan perusahaan terhadap produk, dan
mendemonstrasikan suatu prototype yang mungkin
diharapkan oleh pengguna sehingga akan mempercepat
terwujudnya produk perangkat lunak.
2. Pada proses quick plan dengan model prototyping, tim mulai
melakukan diskusi rencana yang akan dilakukan setelah
mengetahui apa saja kebutuhan yang diinginkan oleh
pengguna. Perencanaan yang dimaksudkan antara lain
adalah pembagian tugas dan tanggung jawab dan rencana
kerja.
3. Pada proses modeling dengan model prototyping, tim mulai
melakukan perencanaan model yang disesuaikan dengan
keinginan pengguna sesuai dengan prototype yang dipilih.
4. Pada proses construction dengan model prototyping, tim
mulai melakukan pembuatan coding dan testing yang
disesuaikan dengan modeling yang telah selesai dibuat.
12
5. Pada proses deployment, delivery dan feedback dengan
model prototyping, tim mendemonstrasikan perangkat lunak
sesuai dengan kebutuhan dasar yang disampaikan oleh
pengguna pada proses communication sebelumnya dan
berdasarkan prototype yang dipilih oleh pengguna. Apabila
feedback dari pengguna baik dan sudah sesuai dengan
kebutuhan, maka perangkat lunak dapat diterima dan proyek
pun selesai. Namun, apabila ternyata adanya suatu revisi
yang harus dilakukan ataupun tidak sesuai dengan keinginan
pengguna, maka kembali lagi ke proses communication dan
melakukan diskusi ulang mengenai revisi yang diinginkan
oleh pengguna.
2.2 Unified Modeling Language (UML)
UML (Unified Modelling Language) menurut Whitten dan Bettley (2007,
p. 371) merupakan suatu set dari modeling yang digunakan untuk mendeskripsikan
sebuah sistem software dalam suatu kondisi dari objek. UML antara lain terdiri
dari usecase diagram, activity diagram, class diagram, dan sequence diagram.
Dalam penelitian skripsi ini, UML digunakan pada saat pembuatan web parts, baik
itu user control web Parts maupun visual web Parts. Dalam penelitian skripsi ini,
UML yang digunakan adalah usecase diagram, activity diagram, class diagram
dan sequence diagram.
13
2.2.1 Use Case Diagram
Menurut Whitten dan Bentley (2007, p. 246), use case diagram
menggambarkan interaksi yang terjadi antara pengguna, sistem dan sistem
external. Dengan kata lain, menggambarkan tentang siapa yang
menggunakan sistem dan dengan cara apa pengguna mengharapkan untuk
berinteraksi dengan sistem.
Use case narrative digunakan sebagai tambahan dalam bentuk teks
untuk menjelaskan urutan – urutan langkah dari setiap interaksi.
Gambar 2.3 Contoh model diagram use case
(Sumber: Whitten, 2007)
Tabel 2.1 Deskripsi Use Case
Elemen Keterangan
14
Use case Pemberian nama pada use case harus menggunakan diawali
dengan kata kerja dan merepresentasikan harapan yang
diinginkan oleh pengguna terhadap use case tersebut.
Aktor Siapa saja yang menjalankan sistem. Aktor terdiri dari 4,
yaitu: primary business actor, primary sistem actor, external
server actor dan external receiver actor.
Deskripsi Penjelasan mengenai gambaran use case yang dilakukan.
Event yang dijalankan Langkah – langkah yang harus dilakukan untuk
menyelesaikan use case.
Precondition Kondisi yang harus dipenuhi sebelum menjalankan use case.
Postcondition Hasil yang dicapai setelah use case berhasil dijalankan.
2.2.2 Activity Diagram
Menurut Whitten dan Bentley (2007, p. 390), activity diagram
menggambarkan rangkaian aliran aktivitas, baik itu proses bisnis, langkah
– langkah dari use case dan logika perilaku objek. Diagram ini pun
menggambarkan aksi yang akan dilakukan saat sebuah operasi dieksekusi
dan memodelkan hasil dari aksi tersebut.
15
Gambar 2.4 Contoh model activity diagram
(Sumber: Whitten, 2007)
Tabel 2.2 Deskripsi Activity Diagram
Elemen Keterangan
Initial Node Lingkaran hitam utuh yang menggambarkan awal dari
proses.
Actions Segiempat tidak bersudut yang merepresentasikan langkah
individu.
16
Flow Panah dalam diagram yang menggambarkan perkembangan
dalam sebuah actions.
Decision Bentuk diamond dengan satu aliran masuk dan dua atau
lebih aliran yang keluar. Aliran yang keluar ditandai untuk
mengindikasikan suatu kondisi.
Merge Bentuk diamond dengan dua atau lebih aliran masuk dan
satu aliran keluar. Ini mengkombinasikan aliran yang tadinya
terpisah oleh decisions pada proses sehingga menjadi satu
aliran.
Fork Balok hitam dengan satu aliran masuk dan dua atau lebih
aliran keluar. Aksi dalam aliran yang pararel.
Join Balok hitam dengan dua atau lebih aliran masuk dan satu
aliran keluar. Aksi yang masuk ke dalam join harus selesai
sebelum proses berlanjut.
Activity Final Lingkaran hitam utuh di dalam lingkaran kosong yang
merepresentasikan bagian akhir dari proses.
17
2.3 Web Server
Web server sama halnya seperti komputer yang berkoneksi dengan
internet yang menunggu permintaan dari browser. Permintaan yang dimaksud
adalah permintaan untuk halaman web, gambar, suara ataupun video. Ketika
sebuah server mendapatkan permintaan dari sumber apapun, apabila server
menemukan sumber nya, maka akan dikembalikkan lagi ke browser (Freeman &
Freeman, 2006, p.3).
Setiap server menyimpan file HTML, gambar, suara atau tipe file
lainnya. Sebagai contoh, saat sebuah browser meminta halaman HTML atau
sumber lainnya, seperti gambar ataupun video, maka server menangkap
permintaan tersebut dan akan menampilkan nya ke browser (Freeman & Freeman,
2006, p.3).
2.4 Web Browser
Web browser menampilkan seluruh informasi yang nantinya akan
ditampilkan dalam halaman pengguna, baik itu konten maupun struktur halaman
nya. Pada saat adanya permintaan pada web server dari web browser, baik itu
konten, gambar, video ataupun lainnya, maka server akan menangkap permintaan
tersebut dan menampilkan pada web browser (Freeman & Freeman, 2006, p. 2).
18
Gambar 2.5 Interaksi antara Web Browser dengan Web Server
(Sumber: Freeman & Freeman, 2006)
2.5 Web Desain
Web desain adalah pemrograman fungsi back – end dari sebuah website
serta pengembangan tampilan front – end dan nuansa tampilan dari perusahaan
atau individu yang diwakilinya.
Web desain sangat diperlukan dan sangat penting bagi suatu web,
terutama pada perusahanaan – perusahaan besar yang menggunakan web sebagai
media promosinya. Web desain memberikan arti yang mengesankan bagi
pengunjung, membangun perbedaan diantara web – web lainnya, membangun
kepercayaan dan kredibilitas dari web tersebut, meningkatkan kemudahan
pengguna dan juga mengoptimalkan web tersebut (Eccher, 2008, p. 2).
2.5.1 Delapan Aturan Emas dalam Mendesain Antarmuka Pengguna19
Menurut Shneiderman (2004, p. 74), mengemukakan 8 (delapan)
aturan yang dapat digunakan sebagai petunjuk dasar yang baik untuk
merancang suatu antarmuka pengguna. Delapan aturan ini disebut dengan
Eight Golden Rules of Interface Desain, yaitu:
1. Konsistensi
Konsistensi disini adalah berusaha untuk menampilkan suatu
desain yang sama dan konsisten pada tiap – tiap halaman pada
antarmuka pengguna (2004, p. 74).
2. Memungkinkan pengguna untuk melakukan shortcut
Berusaha untuk membuat pengguna ahli dapat menuju ke
suatu tempat yang diinginkan dengan menggunakan shortcut, tanpa
perlu melakukannya sesuai prosedur awal (2004, p. 74).
3. Memberikan umpan balik yang informatif
Berusaha untuk memberikan umpan balik yang informatif
kepada para pengguna sehingga pengguna dapat lebih nyaman
untuk melakukan eksplorasi pada suatu halaman. Jadi,
memungkinkan adanya pesan yang diberikan ketika pengguna
menyelesaikan suatu event (2004, p. 74).
4. Merancang dialog untuk menghasilkan suatu penutupan
Merancang dialog untuk menghasilkan suatu penutupan
digunakan untuk memungkinkan adanya pesan sebelum pengguna
mengeksekusi suatu event, sehingga membuat kenyawanan para
20
pengguna untuk melakukan explorasi pada suatu halaman (2004, p.
75).
5. Memberikan penanganan kesalahan yang sederhana
Memberikan pesan - pesan kesalahan ketika seorang
pengguna melakukan atau menekan tombol salah atau mengisi filled
dengan tidak benar dan diminta membenarkannya (2004, p. 75).
6. Mudah kembali ke tindakan sebelumnya
Membuat suatu link - link ke halaman / tindakan sebelumnya
dalam web sehingga mempermudah penggunaan oleh pengguna itu
sendiri (2004, p. 75).
7. Mendukung tempat pengendali internal (internal locus of
control)
Pengguna menjadi pengontrol sistem dan sistem akan
merespon tindakan yang dilakukan pengguna daripada pengguna
merasa bahwa sistem mengontrol pengguna. Sebaiknya sistem
dirancang sedemikan rupa sehingga pengguna menjadi inisiator
daripada responden (2004, p. 75).
8. Menggurangi beban ingatan jangka pendek
Keterbatasan ingatan manusia membutuhkan tampilan yang
sederhana atau banyak tampilan halaman yang sebaiknya disatukan,
serta diberikan cukup waktu pelatihan untuk kode dan urutan
tindakan (2004, p. 75).
2.5.2 Tujuh Aturan Dalam Desain Web21
Menurut Eccher (2008, pp. 5-8), ada 7 aturan dasar yang membantu
desainer pemula atau menengah dalam desain web:
1. Menggunakan teknologi yang dilihat berdasarkan sisi
pengguna
Penggunaan teknologi lebih baik dilihat berdasarkan sisi
pengguna. Dengan menambahkan banyak teknologi baru
kemungkinan dapat menurunkan performa dari suatu website dan
menganggu pengguna sehingga membuat pengguna tidak suka
berlama di website. Sebagai contoh, saat perusahaan mau
menggunakan flash untuk animasi logo suatu situs. Ada plug-in
yang diperlukan untuk menampilkan animasi tersebut dimana akan
membuat pengguna website kurang menyukai nya (Eccher, 2008, p.
5).
2. Mengecualikan penggunaan teknologi berdasarkan sisi client
Pemakaian suatu teknologi yang baru yang nantinya akan
membebankan server ataupun membebankan loading halaman
website setidaknya perlu dilakukan oleh seorang web desainer
tergantung dari kebutuhan yang client inginkan (Eccher, 2008, p. 6).
3. Mengutamakan pengguna
Mengutamakan pengguna dalam hal mendesain suatu web
perlu diperhatikan. Dengan mendengarkan opini dari para pengguna 22
serta melihat desain berdasarkan sisi pengguna akan membantu
dalam proses desain web tersebut. Sebagai seorang web desainer
perlu memperhatikan pengguna, karena pengguna merupakan garis
dasar dan penilai terakhir dari sebuah situs (Eccher, 2008, p. 6).
4. Berusaha untuk mengerti kebutuhan pengguna
Menurut Eccher (Eccher, 2008, p. 6), seorang ahli web
desain membutuhkan keahlian untuk mengerti tentang kebutuhan
pengguna. Pengertian yang baik tentang kebutuhan pengguna dapat
mempercepat pembuatan situs.
5. Kesederhanaan adalah pendekatan yang terbaik
Kesederhanaan dalam pembuatan web menjadi pendekatan
yang terbaik bagi pengguna web dan merupakan fondasi untuk
penambahan fitur – fitur maupun desain visual yang lebih atraktif
lagi dan lebih kreatif lagi (Eccher, 2008, p. 6).
6. Mengutamakan desain yang disukai oleh mayoritas pengguna
Pada dasarnya, sebuah desain tidak akan pernah disukai oleh
semua orang. Setiap orang mempunyai opini nya masing – masing.
Sekalipun begitu, sudah lebih baik apabila membuat mayoritas dari
para pengguna senang akan hasil desain (Eccher, 2008, p. 6).
7. Selalu tetap dalam spesifikasi dan standarisasi teratas
Spesifikasi dan standarisasi web akan berubah dan akan
terus demikian. Seorang web desainer, harus memiliki pemahaman
dasar dari teknik desain terbaru (Eccher, 2008, p. 6).
2.5.3 Tiga Filosofi Desain Web23
Menurut Eccher (2008, p.7), situs web di dunia saat ini dibagi
menjadi 3 filosofi yang berbeda, yaitu usabiliy, multimedia, dan mortised.
Setiap filosofi mempengaruhi 3 faktor penting pada situs web, yaitu:
1. Aesthetics
Faktor aethetics menilai tentang tampilan dan nuansa dari
situs. Lalu, faktor aethetics juga menilai tentang konsisten nya
sebuah situs dengan branding yang diinginkan oleh perusahaan atau
individu.
2. Usability
Faktor usability menilai tentang seberapa cepat dan
mudahnya seorang pengguna menemukan dan memproses
informasi ketika melakukan tugas.
3. Functionality
Faktor functionality menilai tentang aspek fungsional dari
suatu situs, seperti forms dan kemampuan nya.
2.5.3.1 Filosofi Usability
Menurut Eccher (2008, pp. 7-10), filosofi usability
merupakan filosofi desain yang paling mudah diterapkan sehingga
sebuah situs lebih mudah digunakan oleh semua anggota dari
organisasi atau perseorangan.
24
Gambar 2.6 Contoh situs berdasarkan filosofi usability
(Sumber : http://en.wikipedia.org/wiki/Microsoft_SharePoint_2010 )
Filosofi usability menekankan kepada usability dan
functionality dari suatu web. Filosofi ini menyerupai situs yang
dibuat tahun 1990an dikarenakan kesederhanaan yang ditampilkan.
Filosofi usability mengutamakan informasi yang disampaikan
kepada para penjelajah internet (Eccher, 2008, pp. 7-10).
2.5.3.2 Filosofi Multimedia
Menurut Eccher (2008, pp. 11-12), filosofi multimedia
merupakan kebalikan dari filosofi usability. Situs multimedia
menggunakan animasi, audio dan video untuk membuat situs yang
lebih menarik, seperti dibawah ini:
25
Gambar 2.7 Contoh situs berdasarkan filosofi multimedia
(Sumber : http://www.sensisoft.com/ )
Situs diatas biasa diberi nama dengan situs Flash, yang
merupakan situs yang dibuat menggunakan software animasi
Adobe Flash. Adapun beberapa kelebihan dari situs yang
menggunakan filosofi multimedia yaitu dibawah ini (Eccher, 2008,
p. 11):
1. Penggunaan teknologi gambar vektor dengan ukuran yang
kecil dan dapat ditekan, tanpa tidak begitu kehilangan
kualitas gambar.
2. Penggunaan program yang hampir sama hasilnya dengan
XHTML dan CSS.
26
3. Desain multimedia mengkomunikasikan informasi dengan
berbagai dimensi, yaitu grafik, animasi dan audio.
Teknologi situs multimedia tidak hanya memiliki kelebihan
saja, namun juga memiliki kekurangan. Menurut Client Eccher
(Eccher, 2008, p. 11), situs multimedia masih belum bisa
diaplikasikan kepada mayoritas pengguna internet karena beberapa
hal:
1. Web browser terdapat plug – in yang dibutuhkan sehingga
pengguna dapat melihat grafik atau gambar dari situs
multimedia tersebut.
2. Situs multimedia menghabiskan biaya yang lebih mahal
kepada desainer dan juga klien, ini karena situs Flash tidak
mudah di upgrade menjadi situs HTML, terkadang
memerlukan lebih banyak waktu, usaha dan harga untuk
mewujudkannya.
3. Banyak desainer kurang bijaksana dalam menggunakan
kemampuan software multimedia, meskipun gambar vektor
dikompresi dengan baik, ukuran file dari situs multimedia
masih tetap lebih besar daripada situs web tradisional.
2.5.3.3 Filosofi Mortised
Menurut Eccher (2008, pp. 13-15), filosofi mortised
merupakan gabungan antara filosofi usability dan filosofi
multimedia. Filosofi ini menggabungkan keistimewaan dan 27
kelebihan dari usability dan multimedia, menggabungkan keduanya
menjadi sebuah filosofi desain yang dapat dilihat oleh hampir
semua pengguna web, mulai dari grafik yang cepat, mudah
digunakan dan fleksibel.
Gambar 2.8 Contoh situs berdasarkan filosofi mortised
(Sumber : http://www.nbad.com/en/Pages/nbad-global.aspx)
Menurut Eccher (2008, pp. 13-15), situs mortised lebih
menekankan kearah pemanfaatan pengetahuan para pengembangan
web daripada memanfaatkan software sepenuhnya. Yang
membedakannya adalah penggunaan secara optimal HTML, CSS
dan gambar untuk menjadikan situs lebih cepat, lebih kostumisasi
dengan kode yang sedikit. Beberapa kelebihan dari filosofi
mortised:
28
1. Situs mortised lebih cepat dan sangat mudah digunakan,
mengijinkan klien untuk membuat kesan yang sangat baik
untuk para pengguna.
2. Karena menampilkan lebih banyak grafik dan teks yang
lebih sedikit, pengguna dapat lebih cepat mengerti konsep,
ide dan emosi yang digunakan dalam desain.
3. Situs mortised tidak hanya bekerja pada halaman web statis
tapi juga bekerja pada dinamis situs berdasarkan database,
karena menggunakan HTML dan teknologi CSS.
4. Situs mortised dapat dengan mudah untuk didesain menjadi
scalable, situs berdasarkan database.
5. Situs mortised memungkinkan desainer menggunakan
beberapa pilihan desain, seperti Flash, seorang desainer
tidak harus membuat keseluruhan situs dengan Flash, namun
hanya akan diterapkan di beberapa tempat saja.
Sekalipun situs mortised dapat memuaskan kebutuhan situs
bagi sebagian besar pengguna situs web, masih ada kelemahan dari
situs mortised yaitu memerlukan plug-in untuk menggunakan
beberapa element, seperti animasi dan audio.
2.6 HTML
HTML merupakan singkatan dari HyperText Markup Language. Hypertext
membantu para pembuat web dalam melakukan hubungan ke halaman lainnya dan
menghubungkan dokumen manapun kedalam web. HTML merupakan suatu 29
bahasa web yang bersifat universal yang digunakan untuk membuat halaman web
yang nantinya akan diletakkan kedalam web server (Freeman & Freeman, 2006, p.
4).
HTML merupakan kunci untuk menampilkan halaman website pada
browser. HTML dalam halaman web memberitahukan browser seluruh informasi
yang nantinya akan ditampilkan dalam halaman pengguna, baik itu konten maupun
struktur halaman nya (Freeman & Freeman, 2006, p. 4).
2.7 CSS
CSS merupakan singkatan dari Cascading Style Sheet, yaitu menjelaskan
tentang bagaimana sebuah konten akan ditampilkan di dalam halaman web. CSS
dan HTML merupakan dua bahasa yang berbeda. Ini dikarenakan karena CSS dan
HTML memiliki tugas dan tanggung jawab yang berbeda (Freeman & Freeman,
2006, p. 28).
HTML menjelaskan tentang struktur halaman tersebut. Sedangkan CSS
menjelaskan tentang tampilan dari halaman tersebut, baik itu warna, tinggi, lebar,
margin, padding, posisi dan lain - lain. Namun, HTML dan CSS merupakan kedua
bahasa yang digunakan untuk membuat halaman web (Freeman & Freeman, 2006,
p. 28).
2.8 DOM (Document Object Model)
DOM merupakan singkatan dari Document Object Model, yaitu membantu
HTML, CSS, dan JavaScript bekerja bersama – sama dan lebih efektif. DOM
30
menunjukkan struktur halaman. Javascript dan JQuery menggunakan DOM untuk
mengganti struktur dari halaman (Benedetti & Ronan, 2011, p. 8).
Gambar 2.9 Penggambaran DOM (Document Object Model)
(Sumber: Benedetti & Ronan, 2011)
2.9 JavaScript
JavaScript merupakan bahasa yang digunakan sebagai arah pada browser.
JavaScript merupakan bahasa pemrograman berbasis web dan berorientasi objek,
dimana dianggap sebagai sebuah objek yang memiliki metode, properti dan event
yang berbeda. JavaScript mendeteksi apapun yang dilakukan pada halaman web,
seperti mengklik button, memperkecil window, atau memasukkan data kedalam
text field (Benedetti & Ronan, 2011, p. 5).
31
2.10 JQuery
JQuery merupakan singkatan dari JavaScript Query, yaitu menjelaskan
tentang tingkah laku dari halaman web tersebut. JQuery adalah Javascript, namun
lebih tinggi lagi versinya. Jquery adalah JavaScript library yang dikhususkan
untuk mengganti tingkah laku dan memanipulasi halaman web pada saat runtime.
JQuery bekerja pada saat Document Object Model (DOM) berhasil dimunculkan
di tampilan browser (Benedetti & Ronan, 2011, p. 5).
2.11 Microsoft SharePoint 2010
Menurut Drisgill, Ross & Sanford (2011, p. xxiii), SharePoint merupakan
sebuah aplikasi yang sangat flexible dan bisa melakukan apapun. Microsoft
SharePoint 2010 adalah produk Microsoft yang dapat digunakan sebagai media
berbagi informasi (sharing point) yang merupakan aplikasi web portal yang sangat
lengkap.
Menurut Setiawan (2010, p. 4), Microsoft Sharepoint 2010 adalah generasi
ke – 4 dari keluarga sharepoint yang sudah muncul pertama kali sejak tahun 2001.
Lalu kemudian pada tahun 2003, 2007 dan terakhir adalah 2010. SharePoint 2010
merupakan versi yang ke – 14, dimana SharePoint 2007 merupakan versi yang ke
– 12.
Beberapa keunggulan Sharepoint 2010 adalah mampu untuk melakukan
collect, manage dan juga bekerja dengan berbagai macam informasi dari berbagai
macam tipe, bisa dari Microsoft Word document, PDF file, gambar dan lain
sebagainya. Dengan Sharepoint, dapat dengan mudah melakukan pencarian
32
dokumen atau aplikasi yang sudah dibuat tanpa perlu mencari-cari lagi dalam
folder yang pernah disimpan (Setiawan, 2010, p. 4).
2.11.1 SharePoint 2010 Version
SharePoint 2010 tersedia dalam 2 produk, yaitu SharePoint
Foundation 2010 dan SharePoint Server 2010 (Drisgill, Ross, & Sanford,
2011, p. 9).
2.11.1.1 SharePoint Foundation 2010
SharePoint Foundation 2010 merupakan versi gratis terbaru
dari Windows SharePoint Services Version 3 (Drisgill, Ross, &
Sanford, 2011, p. 9).
2.11.1.2 SharePoint Server 2010
SharePoint Server 2010 merupakan versi terbaru dari
Microsoft Office SharePoint Server 2007 (MOSS 2007) (Drisgill,
Ross, & Sanford, 2011, p. 9). Kelebihan SharePoint Server 2010
dalam hal branding adalah adanya fitur Publishing, yang sangat
berguna untuk proses branding, yaitu :
1. SharePoint Server 2010 terdiri dari lebih banyak robust option
untuk navigation yang membuat lebih fleksibel.
2. SharePoint Server 2010 juga menyediakan site administration
yang mempermudah penggantian master page untuk site dan
keseluruhan subsite nya.
3. SharePoint Server 2010 lebih mudah dalam hal modifikasi
theme, termaksud kemampuan untuk mengubah warna dan font
33
dari antarmuka pengguna SharePoint web untuk site maupun
keseluruhan subsite nya.
2.11.2 Tipe – Tipe Website SharePoint
Pada saat installasi SharePoint 2010, akan dibagi menjadi 3
kategories, yaitu: intranet, internet atau extranet. Tiap – tiap dari situs
SharePoint memiliki pengunjung yang berbeda dan desain yang berbeda
tergantung dari rencana awal. Pilihan rencana awalnya terbagi menjadi dua,
yaitu untuk “collaboration” atau “communication” (Drisgill, Ross, &
Sanford, 2011, pp. 9-10).
Sebenarnya bisa menggunakan keduannya, tetapi pastinya akan ada
yang menonjol dari pada yang lainnya. Semisalnya lebih menonjol
“communication” daripada “collaboration”. Desain web untuk
“collaboration” dan “communication” memerlukan SharePoint template
yang berbeda, yang mana membutuhkan perbedaan pendekatan branding
(Drisgill, Ross, & Sanford, 2011, pp. 9-10).
2.9.2.1 Situs Intranet
Situs intranet dikhususkan untuk VPN (Virtual Private
Network) atau koneksi lokal. Fokus dari situs intranet adalah untuk
collaboration, yang didesain untuk tempat penyimpanan content –
content dan tugas – tugas harian. Meskipun demikian, terkadang
halaman home intranet, didesain sebagai tempat communication,
yaitu sebagai tempat untuk menyampaikan informasi kepada
karyawan, seperti berita terakhir perusahaan, pengumuman atau
acara (Drisgill, Ross, & Sanford, 2011, p. 10).34
Jadi, halaman Home situs intranet berisi tentang informasi –
informasi penting yang akan disampaikan kepada karyawan. Lalu,
dari sanalah para karyawan menavigasikan ke area lain dari intranet
untuk bekerja dan berkolaborasi (Drisgill, Ross, & Sanford, 2011,
p. 10).
Gambar 2.10 Contoh situs Intranet
(Sumber: Drisgill, 2011)
2.9.2.2 Situs Internet
Situs internet dikhususkan untuk pengunjung publik, dimana
publik tidak diketahui menggunakan variasi browser. Bisa itu
internet explorer, mozilla firefox, google chrome, dll. Desain situs
internet lebih bergaya dari pada situs intranet. Ini dikarenakan
35
karena opini publik tentang situs internet perusahaan tersebut, akan
berpengaruh besar terhadap kemajuan dari perusahaan tersebut
(Drisgill, Ross, & Sanford, 2011, p. 11).
Seorang developer juga harus memastikan bahwa situs
internet tersebut jalan di browser – browser lainnya, karena kita
tidak tau publik menggunakan variasi dari internet browser yang
mana (Drisgill, Ross, & Sanford, 2011, p. 11).
Gambar 2.11 Contoh situs Internet
(Sumber: http://www.dubaibank.ae/en/)
2.9.2.3 Situs Extranet
Situs extranet menggabungkan keamanan dan kolaborasi
dari situs intranet dengan lebih menekankan branding pada situs
internet. Tujuan dari situs extranet adalah untuk external partner
yang bekerjasama dengan organisasi. Didalam situs nya, pangguna
mengisi username dan password terlebih dahulu untuk lebih aman, 36
dimana nantinya pengguna bisa berkolaborasi dengan pengguna
yang ada di dalam organisasi (Drisgill, Ross, & Sanford, 2011, p.
12).
Sebagai contoh, perusahaan manufaktur memiliki extranet
sites untuk mengijinkan distributor untuk login dan melakukan
pemesanan atau mendapatkan informasi untuk membantu mereka
menjual produk organisasi. Contoh lainnya adalah distributor
Carrefour (semisal Nestle), diberikan hak akses untuk mengecek
persediaan barang di Careffour tersebut dengan mamasuki website
extranet yang disediakan oleh Carrefour tersebut (Drisgill, Ross, &
Sanford, 2011, p. 12).
Yang paling sulit dari situs extranet adalah sistem keamanan
nya, karena banyak organisasi yang menjadi partner dari organisasi
tersebut. Branding pun juga harus konsisten di seluruh situs,
terutama partner bisnis yang menggunakannya (Drisgill, Ross, &
Sanford, 2011, p. 12).
2.9.3 SharePoint Branding
SharePoint branding adalah proses pembuatan identitas dari suatu
perusahaan atau produk yang menunjukkan perbedaan antara branding
yang satu dengan yang lainnya. branding sangat penting bagi sebuah
perusahaan atau produk, karena branding menunjukkan identitas marketing
dari perusahaan atau produk tersebut. Identitas ini melibatkan tentang
warna, huruf, logo dan grafik yang mendukung tentang tampilan secara
umum dan nuansa dari situs (Drisgill, Ross, & Sanford, 2011, p. 4).37
Saat ini, semakin banyak perusahaan atau perseorangan yang
menggunakan SharePoint 2010 sebagai web portal untuk keperluan situs
intranet, internet maupun extranet mereka. Template – template dasar yang
sudah disediakan oleh SharePoint 2010 sendiri pun sudah banyak yang
dipakai oleh perusahaan – perusahaan atau perseorangan lainnya (Drisgill,
Ross, & Sanford, 2011, p. 4)
Banyak perusahaan yang melupakan untuk melakukan
pengimplementasikan branding pada SharePoint 2010 dan merasa bahwa
hal tersebut kurang penting dan kurang perlu. Ini dikarenakan karena
perusahaan merasa yang diperlukan oleh para pengunjung – pengunjung
adalah informasi yang disampaikan dan produk yang menarik yang ada di
dalam situs tersebut. Padahal kenyataanya suatu web, menunjukkan
identitas dan pandangan tersendiri tentang perusahaan tersebut dari para
pengunjung web tersebut (Drisgill, Ross, & Sanford, 2011, p. 4)
Untuk itulah, perlu adanya pengimplementasian branding untuk
meningkatkan adaptasi pengguna dan menyediakan pengalaman yang lebih
baik lagi kepada pengguna. Bagi kebanyakan perusahaan, alasan terbanyak
untuk pengimplementasian branding adalah untuk membuat keunikan pada
situs nya, baik itu intranet, extranet, maupun internet. Membuat sebuah
situs “tidak terlihat seperti SharePoint” menjadi permintaan yang utama
(Drisgill, Ross, & Sanford, 2011, p. 6).
Contoh branding yaitu setiap orang sudah mengenal desain icon
dari Coca – Cola. Coca – Cola selalu menggunakan logo yang sama, warna
38
dan font yang sama. Ini dimaksudkan untuk menunjukkan branding dari
Coca – Cola itu sendiri (Drisgill, Ross, & Sanford, 2011, p. 4).
Kostumisasi tampilan dan menyelesaikan proses branding sangat
kompleks dan membutuhkan pengetahuan tentang web development,
teknik web desain dan harus sudah terbiasa dengan SharePoint
administrator (Swerson, 2011, p. 5).
2.9.4 Proses Branding
Ada empat proses utama dalam branding, yaitu proses discovery,
definition, desain dan development yang termaksud dalam proses
pengumpulan sistem dan kebutuhan bisnis, keuntungan dalam membuat
dan mendefinisikan wireframe, mendefinisikan komposisi desain visual
dan alat yang digunakan untuk membangun desain. Dengan proses
branding sangat berkontribusi terhadap pengalaman pengguna terhadap
situs tersebut (Swerson, 2011, p. 21).
Gambar 2.12 Proses branding
(Sumber: Swerson, 2011)
39
Keuntungan dengan mengetahui proses utama branding adalah
dapat mempermudah berkomunikasi dengan pemilik saham mengenai
stage yang akan dibahas. Dan dengan membuat proses branding, dapat
membantu project manager menemukan ide mengenai tugas yang
dibutuhkan dan pada step mana tugas tersebut dikerjakan (Swerson, 2011,
p. 22).
2.9.4.1 Proses Discovery
Proses discovery merupakan proses menganalisis bisnis,
arsitektur informasi, dan arsitektur teknis dengan bisnis pemilik
saham untuk mengumpulkan dan mendefinisikan kebutuhan bisnis
dan sistem. Proses discovery mempunyai 2 tahapan, yaitu
mengumpulkan kebutuhan bisnis dan sistem. Lalu proses
keduannya adalah mengidentifikasi karakter pengguna system
(Swerson, 2011, pp. 22-23).
40
Gambar 2.13 Fase discovery
(Sumber: Swerson, 2011)
Proses discovery merupakan proses awal dari sebuah
proyek. Pada proses ini, akan ada identifikasi tujuan dan batasan
dari situs, pengenalan anggota team, rencana proyek, resiko dan
peningkatan pola. Seorang bisnis analis memulai dengan melakukan
interview pengguna bisnis dan pemegang saham untuk
mengidentifikasi apa yang pengguna butuhkan dalam situs tersebut
untuk menyediakan fitur dan fungsi apa yang nantinya akan
diadakan.
2.9.4.1.1. Treacibility Matrix
Treacibility matrix digunakan untuk mencatat kebutuhan
pengguna yang nantinya akan digabungkan dan disusun menjadi
41
traceability matrix dan diorganisasikan menjadi banyak kolom.
Traceability matrix dapat dibuat menggunakan excel atau dikelolah
langsung didalam SharePoint sebagai list kolom. Treacibility
matrix dibuat oleh Business Analyst dan Information Architecture.
(Swerson, 2011, p. 23).
Gambar 2.14 Traceability matrix
Proses kedua adalah fase discovery yang merupakan
dokumentasi dan mendefinisikan pengguna sistem. Dengan
mendokumentasikan hal ini, kita akan lebih mudah menentukan
peran dan tipe dari pengguna sistem tersebut. Beberapa kunci
pertanyaan yang bisa ditanyakan kepada pengguna saat
mendefinisikan pengguna (Swerson, 2011, p. 24).
1. Apa peran dan tanggung jawabnya?
2. Beberapa sering menggunakan portal?
42
3. Apa manfaat portal?
4. Apa yang disuka atau tidak disukai mengenai SharePoint?
5. Apakah sudah pernah menggunakan SharePoint sebelumnya?
Seberapa sering?
6. Apakah menggunakan situs web sosial seperti Facebook,
Twitter atau Linked In?
Gambar 2.15 Contoh Pendefinisian Pengguna
2.9.4.2 Proses Definition
Proses definition adalah membuat variasi dokumen untuk
mendefinisikan taxonomy, navigation, halaman layouts dan
templates. Proses definition terdiri dari dua tahap, yaitu
mendefinisikan peta situs (site map), model navigasi, dan tipe
43
content. Ini memberikan informasi dasar untuk pindah ke langkah
kedua, yaitu untuk memulai pengembangan wireframe (Swerson,
2011, p. 25).
Gambar 2.16 Proses definition
(Sumber: Swerson, 2011)
Pada saat proses definition, akan terbentuk suatu kebutuhan
representasi visual dan pelabelan informasi untuk membantu
mendefinisikan peta situs (site map) atau sebuah model navigasi
(Swerson, 2011, p. 26).
Membuat wireframe akan mempermudah dan effektif dalam
menampilkan ide atau layout tanpa harus berkonsentrasi dengan
tampilan visual. Salah satu tools pembuatan wireframe yang
direkomendasikan adalah Microsoft Visio (Swerson, 2011, p. 28).
44
Gambar 2.17 Contoh wireframe
(Sumber: Swerson, 2011)
Peta situs dan model navigasi dikembangkan yang didasari pada
manfaat pengguna. Peta situs tidak harus linear, maksudnya adalah pohon
hirakhi tradisional antara parent dan child. Peta situs juga bisa non – linear
yang fleksibel (Swerson, 2011, p. 29).
Tujuannya adalah untuk menyediakan kepemilikan sistem dan
memberikan kebebasan kepada pengguna untuk menyelesaikan tugas harian
dan menavigasi sistem. Tidak semua peta situs berpola boxes dan squares.
Ukuran dari lingkaran bisa mewakili tingkat kepentingan dan beberapa situs
yang ada di bawahnya (Swerson, 2011, p. 29).
45
Gambar 2.18 Situs peta secara grafik
(Sumber: Swerson, 2011)
2.9.4.3 Proses Design
Proses desain adalah proses mengubah kebutuhan desain
menjadi komposisi desain visual yang terdiri dari 2 tahapan, yaitu
membuat komposisi desain visual. Yang kedua adalah
mengaplikasikan wireframe dan mengadaptasikan nya kedalam
desain visual (Swerson, 2011, p. 30).
46
Gambar 2.19 Proses design
(Sumber: Swerson, 2011)
Pembuatan desain visual menggunakan software mengedit
foto seperti Photoshop. Seorang desainer memanipulasi warna,
tipografi, gambar belakang, garis dan elemen desain lainnya untuk
membuat interpretasi visual mengenai situs yang dengan tampilan
yang diinginkan (Swerson, 2011, p. 31).
Proses ini memakan waktu dan biasanya beberapa kali akan
adanya tinjauan dan saran dari tim mengenai desain tersebut.
Sesudah desain terakhir selesai dan disetujui oleh tim, seorang
desainer akan menerapkan desain tersebut dengan beberapa
tambahan template wireframe yang nantinya keseluruhan desain
akan diberikan kepada pengembang front – end untuk membangun
sistem yang sempurna. Saat keseluruhan desain telah dibentuk dan
disetujui, seorang desainer akan membuat panduan style yang
mendefinisikan (Swerson, 2011, p. 31).
47
Gambar 2.20 Contoh desain visual
(Sumber: Swerson, 2011)
2.9.4.4 Proses Development
Proses development adalah proses akhir dalam proses
branding suatu SharePoint web. Pada proses ini, akan dibuat desain
visual akhir dan membuat prototype berdasarkan desain visual akhir
tersebut. Saat proses development, front – end developer bekerja
dengan visual desainer untuk membuat cascading style sheets
(CSS), images, master pages dan page layout untuk mengubahnya
menjadi SharePoint berdasarkan wireframe dan desain visual. Pada
proses ini, membutuhkan ahli yang mengetahui CSS, HTML,
SharePoint master pages dan SharePoint page layouts (Erik
Swenson, 2011:32).
48
Gambar 2.21 Proses development
(Sumber: Swerson, 2011)
Apabila diperlukan kostumisasi master pages dan page
layouts, front – end developer juga memerlukan pengalaman
dengan SharePoint Desainer 2010. Pengembang bisa menggunakan
SharePoint Desainer (SPD) atau Notepad untuk memodifikasi CSS.
SPD menyediakan beberapa keuntungan yaitu color – coding dan
multiple undo (Swerson, 2011, p. 32).
2.9.5 SharePoint Master Pages
Master pages merupakan fondasi utama dari SharePoint. Setiap
situs SharePoint mereferensikan 2 master page, untuk publishing dan untuk
sistem. Master pages memungkinkan pengguna melihat tampilan yang
konsisten di semua situs dalam satu site collection. Bersamaan dengan
page layout, menghasilkan suatu tampilan yang menarik. Dimana master
49
page merupakan kerangka nya dan page layout merupakan isi nya
(Swerson, 2011, p. 19).
Master page membuat dasar struktur HTML kedalam situs. Satu hal
yang terpenting dari master page adalah pada saat melakukan pengubahan,
akan otomatis mengupdate keseluruhan halaman dan situs yang
berhubungan. Master page juga mengijinkan pengguna untuk melakukan
custom file CSS dan JavaScript. Master pages disimpan dan diatur
menggunakan Master Page Gallery, yang mana dapat diakses melalui
halaman "site setting". pengguna bisa melihat dan modifikasi master page
menggunakan SharePoint Designer 2010 (Swerson, 2011, p. 19).
2.9.6 SharePoint Page Layouts
Page layouts digunakan hanya pada publishing sites dan
mereferensikan ContentPlaceholder pada master page untuk membuat
struktur dan konten pada publishing pages. Dengan adanya
ContentPlaceholder, dapat mengontrol perletakkan field control, content
dan web part zones. Web part zone mengijinkan administrator untuk
menambahkan, menghapus atau menata ulang web part langsung dari web
tersebut. Master page merupakan kerangka luar yang mendefinisikan
keseluruhan kerangka situs. Sedangkan page layout mendefinisikan
peletakkan dari web part zone, field control dan konten yang ada di
dalamnya (Swerson, 2011, p. 19).
50
Gambar 2.22 Hubungan antara Master Page dan Page Layouts
(Sumber: Swerson, 2011)
2.9.7 SharePoint Web Part
Menurut Setiawan (2010, p. 41), Web part merupakan sebuah
teknologi yang dikembangkan oleh Microsoft untuk mendukung plug and
play bagi module – module yang ingin kita buat terpisah dan di pasang ke
dalam sebuah SharePoint Content.
Pemanfaatan web part yang umum adalah bertujuan agar sebuah
module yang visual atau yang non visual bisa di tempatkan dimana saja
dalam satu buah page yang kita buat di dalam SharePoint atau
menggunakan page yang sudah ada di dalam SharePoint.
2.9.8 SharePoint User Interface
Menurut Drisgill, Ross & Sanford (2011, p. 58), tampilan standar
antarmuka pengguna SharePoint berdasarkan master page v4.master
digambarkan sebagai berikut:
51
Gambar 2.23 Tampilan standar SharePoint berdasarkan master page v4.master
(Sumber: Drisgill, Ross & Sanford, 2011)
Berikut penjelasan dari masing – masing area diatas:
Tabel 2.3 Tabel penjelasan tampilan antarmuka pengguna
1 The Ribbon Ribbon merupakan menu yang terdapat pada paling atas
halaman SharePoint 2010 yang berkolerasi dengan halaman
saat ini maupun aksi.
2 Site Actions Sebuah dropdown menu yang diperbolehkan digunakan oleh
pengguna yang berhak. Dikarenakan fungsinya adalah untuk
mengatur banyak aspek dari situs SharePoint.
3 Global
Breadcrumbs Pop
Menunjukkan tampilan hierarchi yang memiliki link menuju
52
– out halaman parent.
4 Page State Action
Button
Merupakan shortcut button yang menampilkan link untuk
mengedit dan menyimpan halaman.
5 Ribbon Contextual
Tabs
Merupakan tabs menu yang mengijinkan pengguna untuk
berganti dari browser menjadi page yang berguna untuk
mengedit halaman.
6 Welcome Menu Drop – down control ini menunjukkan username saat ini yang
berisi My site, My profile, My settings, Sign in as Different
Pengguna dan Sign out.
7 Developer
Dashboard
Launcher
Button ini tersembunyi pada dasarnya. Button ini berfungsi
untuk menunjukkan halaman yang paling dasar.
8 Title Logo Merupakan icon halaman utama pada SharePoint.
9 Breadcrumb Breadcrumb merupakan combinasi dari site title dan halaman
saat ini.
10 Social Buttons Social media button berisi tags dan notes. Lalu juga social
button terdapat “I like it” yang menandakan bahwa halaman
tersebut menarik.
11 Top Link Bar Top link bar disebut juga navigation bar atau global
navigation.
12 Search Area Search area berisi search box yang digunakan untuk
melakukan pencarian content.
13 Help Icon Help icon links pada SharePoint 2010 berisikan help
53
document.
14 Quick Launch Disebut juga left navigation dan digunakan untuk
menunjukkan halaman yang berelasi dengan lokasi saat ini.
15 Tree View Tree View merepresentasikan link content yang ada pada web
SharePoint site
16 Recycle Bin Sebuah link untuk koleksi data yang telah dihapus dari
SharePoint site.
17 All Site Content Sebuah link menuju halaman All Site Content pada SharePoint
site.
18 Body Area Pada body area, berisikan content – content pada halaman saat
ini.
2.9.9 SharePoint Designer 2010
Microsoft SharePoint Designer 2010 merupakan aplikasi web dan
desain yang digunakan untuk membuat dan mengkostumisasi situs dan
aplikasi SharePoint. SharePoint Designer 2010 merupakan tool untuk
mengatur SharePoint. SharePoint Designer 2010 menyediakan suatu
lingkungan tersendiri yang berisi lists, library, pages, data source,
workflows, permissions dan banyak lainnya (Drisgill, Ross, & Sanford,
2011, pp. 77-79).
54
Gambar 2.24 Tampilan SharePoint Desainer 2010
(Sumber: Drisgill, Ross & Sanford, 2011)
Workspace dari SharePoint Designer 2010 antara lain (Drisgill, Ross, &
Sanford, 2011, pp. 77-79):
1. Navigation Panel (1)
Panel yang berisi link kesebuah elemen pembuat situs,
termaksud list, libraries, master pages, page layouts, workflows,
content types dan lain sebagainnya.
2. Ribbon (2)
Ribbon digunakan untuk membuat objek baru. Ribbon
bereaksi terhadap objek yang dipilih oleh pengguna. Ribbon akan
55
memunculkan menu dan option untuk kostumisasi objek tersebut.
3. Gallery dan Summary Pages (3)
Gallery Pages menunjukkan list dari keseluruhan item yang
dipilih. Summary Pages menunjukkan attribut dari elemen yang
dipilih.
2.9.10 SharePoint 2010 List
SharePoint 2010 menyediakan media untuk menyimpan data dalam
bentuk list. Secara sederhana, list bisa dipandang sebagai table sederhana
(atau worksheet pada file Excel). List berfungsi untuk menyimpan data
berdasarkan field (Swerson, 2011, p. 4).
Gambar 2.25 Tampilan list dalam SharePoint 2010
(Sumber: Swerson, 2011)
Bentuk List ada bermacam – macam, yaitu :
1. Custom List
2. Announcement
3. Links
4. Contact
56
5. Task
6. External List
7. Dll
2.9.11 SharePoint 2010 Library
Selain List, SharePoint 2010 juga menyediakan media untuk
menyimpan data dalam bentuk library. Bila list hanya untuk menyimpan
data, maka library digunakan untuk menyimpan file. Document library
merupakan pengembangan list yang ditambahkan dengan relasi ke file –
file dan merupakan tempat penyimpanan, baik itu gambar, video, text dan
lain – lain (Swerson, 2011, p. 4).
Gambar 2.26 Tampilan library dalam SharePoint 2010
(Sumber: Swerson, 2011)
Bentuk Library ada bermacam – macam, yaitu :
1. Document Library
2. Report Library
3. Data Connection Library
4. Asset Library
5. Form Library57
6. Picture Library
7. Slide Library
8. Dll
2.9.12 Peran dan Tanggung Jawab
Menurut Swenson (2011, pp. 33-34), pada proses branding terdapat
beberapa peran dan tanggung jawab yang perlu diketahui oleh seorang
project manager. Peran dan tanggung jawab nya antara lain:
Tabel 2.4 Peran dan tanggung jawab tiap proses
Perlu diketahui bahwa tugas dan tanggung jawab yang dibutuhkan
bisa berbeda di tiap – tiap proyek, tergantung dari kebutuhan pengguna
(Swerson, 2011, pp. 33-34).
2.9.12.1 Visual Desainer
58
Seorang visual desainer berperan terhadap tampilan dan
nuansa dari SharePoint site. Seorang visual desainer diharapkan
memiliki pengetahuan umum tentang cara kerja SharePoint.
Seorang visual desainer bekerjasama dengan Information Architect
dan front end developer untuk membuat tampilan yang disetujui
oleh team (Swerson, 2011, p. 39).
2.9.12.2 Front End Developer
Seorang front end developer mengambil desain dari visual
desainer dan wireframe dari Information Architecture dan membuat
file dan gambar yang bisa di aplikasikan di SharePoint. Seorang
Front End Developer harus memiliki kemampuan HTML, CSS,
modifikasi master pages dan page layouts (Swerson, 2011, p. 40).
2.9.13 Folder 14
Merupakan lokasi tempat dimana files, binaries dan data file yang
dibutuhkan oleh server. Lokasi nya ada pada C:\Program Files\Common
Files\Microsoft Shared\Web Server Extensions\14. Direktori tersebut
terdiri dari dua folder utama yang mendukung proses branding, yaitu:
1. SharePoint Images Folder
Berisi gambar – gambar untuk keperluan tampilan pada SharePoint
2010 portal.
2. SharePoint Styles Folder
Lokasi nya berada di 14\TEMPLATE\LAYOUTS\1033\STYLES.
Berisi beberapa css yang diperlukan untuk keperluan tampilan pada 59
SharePoint portal. File tersebut antara lain:
2.1. COREV4.CSS
2.2. SEARCH.CSS
2.3. LAYOUTS.CSS
2.4. CALENDARV4.CSS
2.5. BLOG.CSS
2.6. MYSITELAYOUT.CSS
2.12 Model Evaluasi Antarmuka Pengguna
Menurut Sonjaya (2009, p. 2), Evaluasi adalah sebuah proses yang secara
sistematis mengumpulkan data yang menginformasikan kepada kita tentang
pendapat seseorang atau sekelompok pengguna mengenai pengalamannnya
menggunakan sebuah produk untuk sebuah tugas tertentu dalam sebuah
lingkungan tertentu.
Evaluasi dibutuhkan untuk memeriksa apakah pengguna dapat
menggunakan produk tersebut dan menyukainya. produk dapat dilakukan
menggunakan kuesioner atau interview. Adapun salah satu dari paradigma
evaluasi ada yang namanya “Quick and Dirty” yang merupakan evaluasi dimana
dapat dilakukan pada semua tahapan pembuatan produk dan penekanannya pada
masukan yang cepat/sesingkat mungkin daripada temuan yang didokumentasikan
secara hati-hati (Sonjaya, 2009). Ada beberapa teknik dalam evaluasi, diantaranya
antara lain:
60
Tabel 2.5 Keterkaitan antara Teknik evaluasi dengan paradigma “Quick and
Dirty”
Teknik “Quick and Dirty”
Observing pengguna Penting untuk melihat bagaimana
pengguna
berperilaku dalam lingkungan aslinya
Asking users Diskusi dengan pengguna dan pengguna
yang
potensial, dalam suatu group atau
group yang khusus
Asking experts Untuk mendapatkan kritik tentang
kegunaan sebuah prorotype
2.13 Microsoft Visio 2010
Microsoft Visio 2010 merupakan software dari Microsoft yang merupakan
software aplikasi illustrasi dalam tampilan 2D. Salah satu kegunaan dari Microsoft
Visio 2010 dalam hal pembuatan branding web portal SharePoint 2010 adalah
pembuatan wireframe atau kerangka desain, dimana terdapat stencil – stencil
khusus untuk membuat wireframe yang informatif yang dapat mempermudah
proses interaksi antara pengguna dan pengembang website (Microsoft, 2012).
61
2.14 Visual Studio 2010 Ultimate
Visual Studio 2010 Ultimate menyediakan alternatif untuk menciptakan
aplikasi SharePoint melalui SharePoint Desainer. Visual Studio mempromosikan
perkembangan pesat SharePoint dengan menyediakan fitur seperti alat advanced
debugging, intellisense, statement completion, dan template project. Visual Studio
menggunakan NET Framework (Microsoft).
2.15 Adobe Photoshop CS5
Adobe Photoshop merupakan software desain yang sangat popular untuk
mendesain sebuah SharePoint site. Adobe Photoshop sangat berguna saat membuat
wireframe. Adobe Photoshop CS5 sendiri merupakan terbitan yang ke -12 dari
Adobe Photoshop (Swerson, 2011, p. 66).
2.16 Firebug
Firebug merupakan sebuah perlengkapan yang sangat popular dan sangat
membantu pengembangan web. Firebug merupakan perangkat tambahan dari web
browser. Firebug dapat melihat struktur HTML dan memodifikasi style dan layout
saat itu juga dimana akan sangat berguna dalam proses implementasi branding
pada SharePoint. Firebug dapat melakukan debugging, menganalisa penggunaan
jaringan dan performa (Mozilla).
62
2.17 YSlow
YSlow digunakan untuk menganalisa halaman web dan menyarankan tips
untuk meningkatkan performa web berdasarkan dari aturan halaman web yang
memiliki performa tinggi. YSlow merupakan perangkat tambahan pada web
browser. Yslow sangat berguna untuk branding SharePoint dalam hal melakukan
analisa halaman web agar halaman web dapat optimal dengan pilihan gambar yang
disesuaikan agar tidak memberatkan waktu munculnya halaman web. YSlow dapat
dibilang sebagai Add-Ons pada Add-Ons, yaitu Firebug (Yahoo).
2.18 Windows Server 2008 R2
Windows Server 2008 R2 merupakan sistem operasi yang digunakan untuk
menjalankan SharePoint 2010 yang direkomendasikan (Swerson, 2011, p. 91).
Windows Server 2008 R2 didesain untuk jaringan, aplikasi dan web services.
Windows Server 2008 R2 membantu para pengguna untuk mengembangkan,
mengirim dan memanage pengguna yang berpengalaman dan aplikasi serta
menyediakan infrastruktur jaringan yang handal.
2.19 Internet Explorer 8 (IE8)
Internet explorer 8 merupakan web browser yang dikembangkan oleh
Microsoft. Pada SharePoint 2010 default master page yang didesain untuk
ditampilkan pada IE8. Namun, internet explorer 8 tidak mendukung CSS level 3.
(Swerson, 2011, p. 198).
63
2.20 MindMapple
MindMapple merupakan aplikasi mindmapping yang dibuat oleh
MindMapple Inc.. MindMapple merupakan aplikasi yang dibuat untuk
menciptakan suatu ide, gagasan, ataupun yang berguna untuk website sendiri yaitu
pembuatan site map dan navigasi (MindMapple, 2011).
64
Recommended