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