Pedoman Standarisasi Website Di Lingkungan Universitas Diponegoro

Direktorat Data dan Sistem Informasi Biro Administrasi Informasi, Komunikasi, Alumni, Bisnis dan Pelaporan

1

Standar Tampilan Situs Web

Di Lingkungan Universitas Diponegoro

Daftar Isi

1. TUJUAN ......................................................................................................................................... 3

2. RUANG LINGKUP ....................................................................................................................... 3

3. STANDAR ..................................................................................................................................... 3

3.1 INDEX HTML .......................................................................................................................... 3

3.2 TATA LETAK (LAYOUT) ........................................................................................................... 3

3.3 LOGO ..................................................................................................................................... 7

3.4 MENU ...................................................................................................................................... 8

3.5 FULLWIDTH IMAGES/HEADER .................................................................................................. 9

3.6 KONTEN/ISI ............................................................................................................................. 9

3.7 FOOTER ................................................................................................................................. 11

3.8 FONT ..................................................................................................................................... 12

3.9 COLOR CODE ......................................................................................................................... 12

3.10 GAMBAR/FOTO ...................................................................................................................... 12

3.11 PENGGUNAAN VIDEO STREAMING ......................................................................................... 12

4. SEARCH ENGINE OPTIMIZATION (SEO) .......................................................................... 13

4.1 KATA KUNCI DAN FRASA ...................................................................................................... 13

4.2 TITLE TAG: <TITLE></TITLE>............................................................................................... 13

4.3 GUNAKAN TITLE YANG SINGKAT DAN JELAS. ......................................................................... 13

4.3 HEADING TAGS: <H1></H1>, <H2></H2> … ..................................................................... 14

4.4 LINKS DENGAN WEBSITE TERKAIT ......................................................................................... 14

4.5 TAG LINKS TEKS (<A HREF>XXX</A>) DAN IMAGE ALT=”XXX” ........................................... 14

4.6 META DESCRIPTION TAG <META NAME=”DESCRIPTION” CONTENT=”XXX”/> ....................... 14

4.7 KONTEN/ISI ........................................................................................................................... 14

5. TUTORIAL STANDARISASI SITUS WEB (FAKULTAS/SEKOLAH/PROGRAM

STUDI) ......................................................................................................................................... 15

5.1 INSTALL CMS WORDPRESS (BAGI YANG BELUM MENGGUNAKAN)........................................ 15

5.2 INSTALL *TEMPLATE DIVI* YANG SUDAH DISEDIAKAN......................................................... 15

5.3 CONTOH SETTING SALAH SATU MODUL LAYOUT .................................................................. 17

5.4 CARA MEMUNCULKAN HOMEPAGE DI HALAMAN UTAMA. ..................................................... 18

5.5 STANDARISASI PRIMARY MENU ............................................................................................. 18

5.6 STANDARISASI FAVICON ........................................................................................................ 19

5.7 STANDARISASI FONT .............................................................................................................. 19

5.8 THEME OPTIONS .................................................................................................................... 19

5.9 THEME CUSTOMIZER ............................................................................................................. 20

5.10 STANDARISASI HEADER & NAVIGATION ................................................................................ 21

5.11 STANDARISASI LOGO HEADER ............................................................................................... 24

5.12 STANDARISASI FOOTER .......................................................................................................... 24

5.13 UPDATE THEME ..................................................................................................................... 25

6. TUTORIAL STANDARISASI SITUS WEB (LEMBAGA/UNIT KERJA) ........................... 27

6.1 INSTALL CMS WORDPRESS (BAGI YANG BELUM MENGGUNAKAN)........................................ 27

6.2 INSTALL *TEMPLATE DIVI* YANG SUDAH DISEDIAKAN......................................................... 27

6.3. CONTOH SETTING SALAH SATU MODUL LAYOUT .................................................................. 29

2

6.4. CARA MEMUNCULKAN HOMEPAGE DI HALAMAN UTAMA. ..................................................... 30

6.5. STANDARISASI PRIMARY MENU ............................................................................................. 30

6.6. STANDARISASI FAVICON ........................................................................................................ 31

6.7. STANDARISASI FONT .............................................................................................................. 31

6.8. THEME OPTIONS .................................................................................................................... 31

6.9. THEME CUSTOMIZER ............................................................................................................. 32

6.10. STANDARISASI HEADER & NAVIGATION ................................................................................ 33

6.11. STANDARISASI LOGO HEADER ............................................................................................... 36

6.12. STANDARISASI FOOTER .......................................................................................................... 36

6.13. UPDATE THEME ..................................................................................................................... 38

3

1. Tujuan

Standar ini disusun untuk menyeragamkan dan menyelaraskan tampilan situs web di fakultas /

sekolah / program studi / Lembaga / unit kerja di lingkungan Universitas Diponegoro dalam rangka

:

1. Keterbukaan Informasi dan layanan Informasi publik

2. Merespon perkembangan teknologi Informasi dan komunikasi

3. Meningkatkan pengalaman pengguna (user experience) dengan menyajikan situs web yang

mudah dibaca dan menyesuaikan perangkat pengguna

4. Mengoptimalkan pencarian situs web dilingkungan Undip dalam mesin pecari

5. Meningkatkan pemeringkatan Undip baik nasional maupun internasional yang memiliki

parameter dari kekayaan Informasi di situs web

2. Ruang Lingkup

Ruang lingkup penyeragaman tampilan situs web di fakultas / sekolah / program studi / Lembaga /

unit kerja di lingkungan Universitas Diponegoro meliputi aspek-aspek :

1. Halaman index

2. Tata letak (layout)

3. Logo

4. Menu Yang Wajib Ada

5. Isi / konten

6. Fitur meliputi : Font, kode warna, gambar

7. Search Engine Optimization (SEO)

8. Tutorial

3. Standar

3.1 Index HTML

Halaman index adalah halaman depan yang memuat semua struktur menu website yang harus

menjadi standar semua website fakultas / sekolah / program studi / Lembaga / unit kerja di

lingkungan Universitas Diponegoro. Kode HTML disertakan pada dokumen ini untuk menjadi

acuan penyusunan kerangka desain web.

3.2 Tata Letak (Layout)

Layout template website ini telah ditetapkan standarnya, akan tetapi tidak menutup kemungkinan

jika fakultas / sekolah / program studi / Lembaga / unit kerja akan menambah berdasarkan

kebutuhan yang ada dengan tidak menghilangkan layout yang telah ditetapkan.

4

3.2.1 Tata Letak (Layout) untuk Halaman Depan (HomePage)

5

Elemen Template Tata Letak Halaman Depan (Home Page) Fakultas/Prodi

6

3.2.2 Tata Letak (Layout) untuk Halaman

7

Elemen Template Tata Letak pada Halaman Fakultas/Unit, yaitu konten terdiri dari isi dan side

bar.

3.3 LOGO

Penggunaan Logo dalam suatu website akan distandarkan yaitu :

Dimensi logo : 235 x 55 px

Warna putih dan background transparan

Posisi di sebelah kiri di dalam primary menu

Bentuk logo tersebut berdasarkan kesepakatan pada Workshop Standarisasi Website pada Tahun

2017

8

Contoh : Tata letak tulisan dalam logo sudah di atur seperti dalam contoh.

3.4 Menu

Secondary Menu : Menu kedua yang berada di paling atas. Fakultas wajib

menggunakan menu ini sebagai identitas dari standar Universitas. Secondary menu

terdiri dari identitas telepon, email, dan sosial media dari Fakultas/prodi.

Primary Menu : Menu utama yang berisi dari berbagai navigasi. Ketentuan

standarisasi dari primary menu yaitu :

a. Home

b. Profil

c. Akademik

d. Riset & Pengabdian

e. Kemahasiswaan

f. Umum & Aset

g. Direktori

Ketentuan Dropdown menu :

- Home/Beranda

- Profil

o Sejarah o Visi dan Misi

o Pimpinan Fakultas

o Program Studi : Rincian Program Studi dibuat dalam 1 laman dengan beberapa link

terkait

o Sumber Daya Fakultas-Prodi - Akademik

o Kalender Akademik

o Penerimaan Mahasiswa Baru

o Kurikulum

- Riset & Pengabdian o Penelitian

o Pengabdian

o Publikasi

- Kemahasiswaan o Beasiswa

o Himpunan Mahasiswa

o Alumni

o Lowongan Kerja

- Umum & Aset o Fasilitas

- Direktori (berisi dengan link-link yang berhubungan dengan fakultas/prodi/unit sekaligus

berisi link kepakaran.undip.ac.id)

Fakultas/Prodi Wajib menampilkan link kepakaran.undip.ac.id pada website.

9

Adapun jika fakultas akan menambah merupakan hak dari masing-masing Fakultas, tetapi

menu-menu di atas merupakan menu pokok yang harus ditampilkan pada primary menu.

Untuk ketentuan primary menu UNIT yang mungkin tidak ada menu yang berhubungan, maka

menu dapat dihilangkan dan diganti dengan menu yang berhubungan dengan fungsi Unit

Kerja masing-masing.

3.5 Fullwidth Images/Header

Dalam penggunaan Header, Fakultas dapat mengikuti aturan yaitu menggunakan jenis

header yang berukuran lebar, selebihnya jika Fakultas ingin menambah beberapa kreasi,

merupakan hak masing-masing. Berikut beberapa standarisasi slider:

Gunakan jenis modul text dan tombol dengan memberi background sebagai HotNews

Fakultas/Prodi.

Tombol dapat digunakan untuk link ke suatu laman yang terkait.

Ukuran gambar/foto : 1500 x 500 px (dapat disesuaikan)

Warna sebaiknya disesuaikan dengan ciri Fakultas / Sekolah / Lembaga / Program Studi /

Unit Kerja masing-masing

3.6 Konten/Isi

Dalam konten website telah diberikan aturan beberapa poin yang harus ditampilkan dalam

halaman utama/hompage. Adapun poin yang harus ditampilkan antara lain :

a. Icon Penting yang menggunakan jenis modul bulrb Icon penting yang harus

ditampilkan yaitu :

• Unit Layanan Terpadu UNDIP

• Layanan Fakultas seperti Helpdesk atau layanan lainnya

• Kalender Akademik

• Download Area

• atau Ikon penting Fakultas/Prodi lainnya.

10

Adapun Fakultas-Fakultas dapat menyesuaikan sendiri sesuai kebutuhan.

a. News / berita terkini yang merupakan jenis modul Blog.

b. Pengumuman yang menggunakan jenis modul Portfolio atau modul sidebar.

c. Agenda yang menggunakan jenis modul text, jika Fakultas menginginkan menggunakan

plugin maka dipersilakan.

d. Prestasi yang menggunakan jenis modul Blog dengan kategori Prestasi (jika fakultas),

adapun Unit bisa menyesuaikan.

e. Penelitian & Pengabdian yang menggunakan jenis modul Blog dengan kategori

Penelitian dan Pengabdian (jika fakultas), adapun Unit bisa menyesuaikan.

11

f. Info Alumni - Success Story yang menggunakan jenis modul text, diharapkan

Fakultas/Prodi mampu menampilkan info terkait Alumni / atau cerita sukses alumni.

g. Info Penerimaan Mahasiswa Baru yang menggunakan jenis modul text.

h. Popular News Fakultas/Unit dapat menampilkan beberapa news yang terpopuler dalam

kurun waktu tertentu. Hal ini Fakultas dapat menggunakan widgets.

Dalam setiap konten isi di atas, Fakultas/Sekolah/Lembaga / Unit Kerja / Program Studi

diperbolehkan memberikan desain / background sesuai cirinya masing-masing (jika ada).

3.7 Footer

Footer yang merupakan bagian bawah suatu website di dalam template ini terbagi menjadi 2

bagian yaitu footer widget dan main footer. Adapun aturan standarisasi yang diterapkan adalah

sebagai berikut :

a. Gunakan layout footer 4 bagian untuk footer widget, yang terdiri dari :

- Kontak : nama dari sebuah Fakultas dengan mencantumkan logo undip di atasnya

berwarna putih transparan. Di bawahnya tak lupa berikan nomor teleon lengkap

dengan email.

- Layanan : berisikan beberapa link layanan yang dimiliki oleh sebuah Fakultas.

- Link : berisikan beberapa kumpulan link penting guna untuk mempermudah

pengguna menemukan apa yang dicari.

- Maps : berisikan peta lokasi dari sebuah Fakultas.

b. Warna background footer widget yaitu : menyesuaikan primary menu

c. Main Footer yang berisi identitas dari sebuah Fakultas disertai dengan icon sosial media

yang dimiliki masing-masing Fakultas.

Contoh :

12

Copyright Universitas Diponegoro | 2020

3.8 Font

Jenis-jenis fonts yang biasa digunakan didalam website. Akan tetapi untuk memenuhi unsur

aksesibilitas, disarankan untuk menggunakan web font yang sesuai default Theme. Untuk

homepage font dapat disesuaikan dengan model layout yang telah ditentukan.

3.9 Color Code

Aturan warna yang harus diterapkan pada web Fakultas antara lain :

a. Secondary Menu (terletak di bagian header paling atas)

Background color : #3D59AB (Kode Warna pada PP 15 Tahun 2015 tentang Statuta

Undip) atau dapat disesuaikan dengan identitas warna Fakultas.

Text color : #ffffff (white)

b. Primary menu (menu utama)

Background color : disesuaikan dengan warna secondary menu agar selaras.

Text color : usahakan menggunakan warna yang kontras dengan background agar

mudah dibaca.

c. Footer

Footer widgets : menyesuaikan dengan identitas fakultas.

3.10 Gambar/Foto

Gambar harus di set ke ukuran yang ringan saat ditampilkan di website. Penggunaan

gambar pada situs didorong mana mendukung situs atau halaman konten. Penggunaan

gambar resolusi tinggi hasil mendownload penundaan bagi banyak pengguna dan tidak

boleh digunakan. Jika gambar besar diperlukan, misalnya gambar diagram atau peta, bisa

menggunakan versi “thumb-nail “ untuk kemudian bisa di tampilkan ke gambar yang lebih

besar dengan cara di click.

3.11 Penggunaan Video Streaming

• Website Fakultas dianjurkan untuk mempunyai rekaman video Fakultas

• Bisa di simpan langsung atau streaming dari website YouTube dengan memakai

widget dan kode yang tersedia

• Hindari penggunakan link video langsung dari server untuk mengurangi load website

13

4. Search Engine Optimization (SEO) Search Engine Optimization atau optimisasi mesin pencari adalah praktik meningkatkan

kualitas dan kuantitas lalu lintas situs web, serta pengaruh terhadap situs web yang dimiliki,

melalui hasil mesin telusur yang tidak berbayar (juga dikenal sebagai "organik").

SEO merupakan usaha untuk memahami apa yang orang cari secara daring, jawaban yang

mereka cari, kata-kata yang mereka gunakan, dan jenis konten yang ingin mereka konsumsi.

Mengetahui jawaban atas pertanyaan-pertanyaan ini akan memungkinkan untuk terhubung

dengan orang-orang yang mencari secara daring untuk solusi yang ingin ditawarkan.

Mengetahui keinginan audiens / user situs web adalah satu sisi dari koin SEO, menyediakan

cara untuk dapat ditemukan dan dipahami oleh peramban mesin pencari adalah sisi koin

lainnya. Dalam panduan ini, dipelajari cara melakukan keduanya.

Untuk mengoptimalkan SEO maka beberapa hal yang bisa dilakukan adalah:

o Aksesibilitas Peramban (Crawl) untuk membuat mesin pencari dapat membaca situs

web

o Membuat konten yang menarik yang menjawab permintaan pencarian dari pengguna

o Kata kunci dioptimalkan untuk menarik pencari/pengguna dan mesin pencari

o Pengalaman pengguna dalam kecepatan pemuatan (loading), dan antarmuka pengguna

yang memikat

o Konten yang layak dibagikan yaitu memiliki tautan, kutipan / sitasi, dan amplifikasi

o Judul, URL, & deskripsi untuk menggambar CTR (Click-through rate) yang tinggi di

peringkat. CTR adalah jumlah pengunjung yang mengklik tautan ke halaman situs

anda yang berasal dari melihat halaman situs lain, email atau pemasangan iklan online

o Cuplikan / skema agar menonjol di SERP (Search Engine Result Page) atau halaman

hasil pencarian

Berikut adalah beberapa hal untuk membantu optimisasi mesin pencari untuk halaman situs

web unit kerja / fakultas / sekolah / program studi.

4.1 Kata Kunci dan Frasa

Kenali audiens masing-masing. Masukkan kata dan frasa yang mungkin digunakan oleh

target audiens untuk halaman website. Contohnya, jika ingin membuat sebuah halaman yang

menjelaskan „prestasi Undip‟, maka harus diprediksi kata kunci yang akan dipakai oleh

audiens. Apakah istilah seperti „kerja‟, lowongan‟ atau „lowongan kerja di Universitas‟ akan

diperlukan, atau kombinasi semuanya.

Beberapa search engines memberi perhatian lebih pada kata- kata dan frasa yang ada di bagian

atas halaman, jadi masukkan kata kunci dan frasa, khususnya dalam headings dan beberapa

paragraf awal. Bagaimanapun juga, sebaiknya dalam website tetap mengulang-ulang kata

kunci dan frasa di halaman website karena search engines juga memperhatikan jumlah kata dan

frasa tertentu jika diulang. Gunakan kata dan frasa khusus dan umum yang berhubungan

dengan isi halaman web. Kata kunci dan frasa harus selalu relevan dengan isi halaman webiste

dan target audiens, tidak untuk meningkatkan ranking search engine website.

4.2 Title Tag: <Title></Title>

Kata-kata dalam title tag sangat penting dalam menentukanranking halaman di search engines.

Sangatlah penting untuk memastikan bahwa kata kunci yang paling penting digunakan dalam

title tag untuk tiap halaman individual di dalam website, dan semakin dekat dengan bagian

depan tag, semakin baik.

4.3 Gunakan title yang singkat dan jelas.

Kebanyakan search engines, termasuk Google, menggunakan teks di dalam title tag sebagai

teks link ke halaman website yang dituju. Teks itu juga digunakan sebagai title oleh browser

14

web dan ketika membuat bookmark halaman, jadi title itu harus bermakna.

4.3 Heading Tags: <H1></H1>, <H2></H2> …

Ini adalah cara yang baik untuk menampilkan kata dan frasa kunci di halaman website, dan

Google secara khusus memberi penekanan lebih pada konten yang ada di tags heading

daripada yang ada di teks main body. Tag <H1>dianggap lebih penting dari tag<H2>, dan

seterusnya.

Sebaiknya menggunakan tag-tag tersebut kadang-kadang saja, karena penggunaan berlebihan

tag ini dapat membuat halaman website terlihat berantakan dan membingungkan pembaca.

Kadang lebih baik untuk memberi highlight pada heading dengan menggunakan bold.

4.4 Links dengan website terkait

Lebih banyak website yang menaruh link ke halaman website yang dimiliki Undip, akan lebih

meningkatkan ranking website tersebut di dalam search engine.

Contohnya, situs dengan informasi mengenai Universitas Diponegoro, pendidikan tinggi,

sarjana/pasca sarjana, penelitian, dan sebagainya, akan sangat relevan untuk Undip. Jika

memasang link ke halaman website unit kerja / fakultas / sekolah / program studi, maka hal itu

akan meningkatkan ranking Undip dalam search engine.

Untuk mengendalikan link ke halaman website, maka situs lain harus menggunakan kata kunci

tersebut. Contoh: „Lihat lowongan pekerjaan kami‟ bukan „untuk lowongan pekerjaan “klik di

sini”.

4.5 Tag Links Teks (<a href>xxx</a>) dan Image alt=”xxx”

Labeli link teks dengan jelas. Contoh, gunakan „Tampilkan Prestasi Undip‟, bukan „untuk

menampilkan Prestasi Undip “klik di sini”.‟

Hal yang sama juga untuk tags alt gambar. Masukkan teks yang relevan dengan gambar, atau

jika menggunakannya sebagai link, tunjukkan kemana link itu akan membawa penelusuran,

seperti: alt=‟Tampilkan Kegiatan Prodi S1 Ilmu Gizi Undip‟.

4.6 Meta Description Tag <meta name=”description” content=”xxx”/>

Tag ini digunakan untuk menulis deskripsi unik untuk hasil pencarian. Teks ini muncul di

bawah teks link di hasil pencarian dan merupakan cara untuk memberitahu orang tentang apa

yang dapat ditemukan di halaman website. Lebih baik jika menulis deskripsi secara pendek

dan jelas.

Tidak semua search engines akan menggunakan deskripsi yang ditulis dalam laman website.

Google, contohnya, akan menggunakan penjelasannya sendiri berdasarkan konten halaman

website.

4.7 Konten/Isi

Jumlah pengunjung yang banyak akan meningkatkan ranking di search engine, jadi sebaiknya

masing-masing pengelola website selalu mengupdate dan menambahkan konten baru di

website masing-masing setiap hari. Ini akan membantu mendorong pengunjung untuk kembali

ke situs tersebut dan menarik pengunjung baru. Pilih beberapa kata kunci/ frasa dari halaman situs web dan lakukan pencarian. Contohnya, masuk ke Google dan cari „penelitian di Undip‟.

Di daftar hasil pencarian, pilih yang pertama dan klik link dengan label „cached‟. Anda akan

dapat melihat bagaimana kata kunci ditampilkan di halaman website.

15

5. Tutorial Standarisasi Situs Web (Fakultas/Sekolah/Program Studi)

Website Fakultas/Sekolah/Lembaga/Unit Kerja / Program Studi dianjurkan agar menggunakan

Content Management System (CMS) berbasis Wordpress. Berikut ini akan dijelaskan

beberapa langkah dalam melakukan standarisasi situs web.

5.1 Install CMS Wordpress (bagi yang belum menggunakan)

Download Wordpress

Install

5.2 Install *Template Divi* yang sudah disediakan.

1. Masuk ke halaman Login Wordpress masukkan username & password login

2. Pada Dashboard, klik menu Appearance theme Add New Upload Theme: Pilih file “Divi.zip” Install Now Klik Activate

3. Buat New Pages : “Home” atau “Beranda”

Klik Menu Pages Add New Beri Title “Beranda” Klik Tombol “Import &

Export”.

16

Selanjutnya akan muncul kotak dialog seperti di bawah :

Pilih Import lalu cari File : Builder Layout Beranda (ID) Fakultas.json (file

terlampir)

Klik Import Divi Builder Layout.

Kemudian, Page Beranda akan terisi otomatis layout yang telah diatur.

17

Page “Beranda” merupakan homepage dari website yang telah distandarkan

tata letak layoutnya, sehingga Fakultas wajib untuk mengisi dan tidak

dianjurkan untuk menghilangkan, tetapi Fakultas dapat menambahkan sesuai

dengan kebutuhan masing-masing.

Adapun, konten yang perlu ditampilkan antara lain :

a) Images dan Teks yang menjadi HotNews / Profil Fakultas-Prodi

b) News / Berita Terkini

c) Pengumuman, terdiri dari : Akademik, Kemahasiswaan, Kepegawaian

d) Ikon penting, yang berisi link : PMB, Kalender Akademik, SIA, Alumni, Download, dll.

e) Postingan yang berkategori : Penelitian & Pengabdian, Prestasi, serta Agenda

f) Success Story / Opini Alumni / Testimonial

g) Informasi PMB maupun Informasi penting lainnya.

5.3 Contoh Setting salah satu Modul Layout

Blog: Klik Modul Blog Add New Blog Klik Setting Atur sesuai kebutuhan

Contoh yang perlu diatur :

Jenis posting yang akan ditampilkan adalah Post dengan jumlah post 3 dan jenis

kategori yang akan ditampilkan adalah Berita. Untuk selengkapnya dapat diatur

sesuai dengan kebutuhan informasi yang akan ditampilkan tiap Fakultas-

Prodi/Unit

18

5.4 Cara memunculkan Homepage di halaman utama.

Klik menu setting Klik Reading Pada Front page display, pilih A Static

Page : Front Page Beranda/Home (Page yang diimport sebelumnya).

5.5 Standarisasi Primary Menu

Menu utama yang ditentukan antara lain :

Beranda/Home

Profil, dengan dropdown menu :

a. Sejarah

b. Visi Misi

c. Pimpinan Fakultas

d. Program Studi

e. Sumberdaya Fakultas/Prodi

Akademik, dengan dropdown menu :

a. Kalender Akademik

b. Penerimaan Mahasiswa

c. Kurikulum

Kemahasiswaan, dengan dropdown menu :

a. Beasiswa

b. Himpunan Mahasiswa

c. Alumni

d. Lowongan Kerja

Riset & Pengabdian, dengan dropdown menu :

a. Penelitian

b. Pengabdian

c. Publikasi

Umum & Aset , dengan dropdown menu :

a. Fasilitas

Direktori (Berisi file-file dan link yang penting serta perlu dan dapat dipublikasikan)

19

Cara untuk mensetting menu dengan membuat Pages secara manual satu

persatu dan diisi sesuai konten masing-masing Fakultas, atur struktur menu

seperti aturan di atas (untuk menu lainnya bisa ditambahkan sesuai kebutuhan

masing-masing) :

5.6 Standarisasi Favicon

Icon / Site Identity yang digunakan adalah logo Universitas Diponegoro

dengan ukuran maksimal 512x512 px. Cara : Klik Menu Appearance General

Setting Site Identity

- Upload Image : Logo Undip Save and Publish.

5.7 Standarisasi Font

Font yang digunakan dalam Website yakni Exo dan Opensans.

5.8 Theme Options

Berikut langkah untuk mengimport beberapa pengaturan pada theme options (Divi).

Klik Divi Theme Options klik Tombol Import & Export :

Pilih import Cari File : Theme Options Fakultas.json Klik Import Divi

Theme Options. Maka seluruh setting akan mengikuti beberapa hal yang telah

ditetapkan dalam pedoman.

20

5.9 Theme Customizer

Berikut langkah untuk mengimport beberapa pengaturan pada theme customizer.

Klik Appearance Customize

Lalu, Klik tombol import & Eksport Pilih Import Cari File : Customizer Settings

Fakultas.json Klik Import Divi Customizer Settings. Maka seluruh setting akan

mengikuti beberapa hal yang telah ditetapkan dalam pedoman.

21

5.10 Standarisasi Header & Navigation

a. Primary Menu Bar

Primary menu bar merupakan menu utama dari sebuah website. Berikut langkah

untuk setting primary menu bar :

Klik menu Appearance Customize Header Navigation Primary Menu Bar

Lakukan setting seperti gambar di bawah :

Menu Height : 60, Logo Max Height : 60, Text Size : 13, Font type : Open Sans (Default

Theme Font), Background color : bisa disesuaikan dengan identitas Fakultas

22

b. Secondary Menu Bar

Secondary Menu Bar merupakan menu tambahan setelah menu utama, yang wajib ada

berdasarkan aturan standarisasi. Berikut langkah setting secondary menu bar :

Text size : 12

Font type : Open Sans / Default Background Color : Dapat disesuaikan dengan identitas

warna Fakultas/Unit

Contoh :

Background Color : #3D59AB (sesuai warna bendera pada Statuta Undip)

Text Color : #ffffff

Dropdown Menu Background color : #3D59AB

Dropdown Menu Text Color : #ffffff

Cara setting menu secondary (social media, email, dan telepon) :

Klik Menu Divi Theme Options General Cari pengaturan Facebook, twitter,

google+, dll lalu klik enable dan tulikan link alamat sosial media sesuai masing-masing

fakultas.

23

c. Fixed Navigation Setting

Merupakan navigasi dalam posisi melayang saat di scroll, berikut langkah untuk

setting :

Masih dalam menu Header & Navigation Masuk ke Fixed Navigation Setting :

Fixed Menu Height : 55

Text Size : 13

Primary Menu BG Color : bisa disesuaikan ciri fakultas

Secondary Menu BG Color : dapat disesuaikan dengan warna primary menu agar selaras.

Secondary Menu Link Color : #ffffff (usahakan selalu kontras)

Primary Menu Link Color : bisa disesuaikan

Header Elements

Untuk mengatur secondary menu, terkait dengan header elements, yaitu ceklist show

social icons dan button search, lalu isikan nomor telepon dan email Save.

24

5.11 Standarisasi Logo Header

Aturan : Logo Undip Warna Putih Transparan berada di sebelah kiri

Font : Arial , Warna : Putih, Nama Fakultas : Bold, Background Transparan (dapat mengedit file :

logo standar fakultas tipe .*psd)

*warna Background biru hanya utk memperlihatkan struktur logonya.

Cara upload Logo pada Header :

Klik Menu Divi Theme Options General Logo : Pilih file Upload Save

5.12 Standarisasi Footer

- Layout : Four columns (4)

- Warna Background Footer : #00031c (atau bisa disesuaikan dengan identitas fakultas)

- Widget :

• Column 1 Text : berisi identitas Fakultas

• Column 2 Text : berisi layanan

25

• Column 3 Text : berisi tautan penting

• Column 4 Text : Lokasi (Maps) / Custom HTML

- Konten Footer Area

Pada menu Appearance klik customize Widgets Isi Footer Area Column 1 dst

sesuai dengan standarisasi Footer :

Untuk mengedit bagian Footer (copyright ……) Appearance Customize Footer Bottom

Bar Pada Footer Credits dapat diisi dengan contoh :

Copyright © Universitas Diponegoro | 2020

Maka Hasilnya seperti di bawah ini :

5.13 Update Theme

Klik Divi Theme Options, lalu pilih tab UPDATE, masukkan kode berikut :

Username : Lisense

API key : c167503586cf5d22a36b4d88992fafea39d8a082 Klik Save

Update Theme Otomatis

26

KETERANGAN : 1. Pedoman di atas tidak membatasi jika Fakultas/Sekolah/Unit Kerja/Lembaga ingin

menambah konten-konten modul lain asalkan tetap memenuhi standar Universitas

2. Universitas telah memberikan gambaran layout yang dapat diterapkan dan disesuaikan

dengan kebutuhan masing-masing Lembaga/Unit Kerja.

3. Themes tersebut di atas hanya digunakan untuk website yang memiliki sub domain

undip.ac.id

27

6. Tutorial Standarisasi Situs Web (Lembaga/Unit Kerja)

Website Lembaga / Unit Kerja dianjurkan agar menggunakan Content Management System

(CMS) berbasis Wordpress. Berikut ini akan dijelaskan beberapa langkah dalam melakukan

standarisasi situs web.

6.1 Install CMS Wordpress (bagi yang belum menggunakan)

Download Wordpress

Install

6.2 Install *Template Divi* yang sudah disediakan.

1. Masuk ke halaman Login Wordpress masukkan username & password login

2. Pada Dashboard, klik menu Appearance theme Add New Upload Theme: Pilih file “Divi.zip” Install Now Klik Activate

3. Buat New Pages : “Home” atau “Beranda”

Klik Menu Pages Add New Beri Title “Beranda” Klik Tombol “Import & Export”.

28

Selanjutnya akan muncul kotak dialog seperti di bawah :

Pilih Import lalu cari File : Builder Layout Unit.json (file terlampir)

Klik Import Divi Builder Layout.

Kemudian, Page Beranda akan terisi otomatis layout yang telah diatur.

29

Page “Beranda” merupakan homepage dari website yang telah distandarkan

tata letak layoutnya, sehingga Unit wajib untuk mengisi dan tidak dianjurkan

untuk menghilangkan, tetapi Unit dapat menambahkan sesuai dengan

kebutuhan masing-masing.

Adapun, konten yang perlu ditampilkan antara lain :

a) Ikon Penting yang terisi link yang terkait layanan pada masing-masing unit.

b) Data penting yang dapat/berhak dipublikasi

c) Berita Terkini : bersisi postingan terkini.

d) Jadwal Agenda / Kegiatan

e) Tautan Penting yang dapat dicantumkan pada homepage

6.3. Contoh Setting salah satu Modul Layout

Blog: Klik Modul Blog Add New Blog Klik Setting Atur sesuai kebutuhan

Contoh yang perlu diatur :

Jenis posting yang akan ditampilkan adalah Post dengan jumlah post 3 dan jenis

kategori yang akan ditampilkan adalah Berita. Untuk selengkapnya dapat diatur

sesuai dengan kebutuhan informasi yang akan ditampilkan tiap Unit

30

6.4. Cara memunculkan Homepage di halaman utama.

Klik menu setting Klik Reading Pada Front page display, pilih A Static Page :

Front Page Beranda/Home (Page yang diimport sebelumnya).

6.5. Standarisasi Primary Menu

Menu utama yang ditentukan antara lain :

Beranda/Home

Profil, dengan dropdown menu :

a. Sejarah

b. Visi Misi

c. Pimpinan Fakultas

Tugas dan Fungsi, dengan dropdown menu :

Fasilitas

Direktori

Kontak

31

Cara untuk mensetting menu dengan membuat Pages secara manual satu persatu dan

diisi sesuai konten masing-masing Unit, atur struktur menu seperti aturan di atas (untuk

menu lainnya bisa ditambahkan sesuai kebutuhan masing-masing)

Contoh pembuatan menu

Sesuaikan dengan Primary Menu yang dibutuhkan :

6.6. Standarisasi Favicon

Icon / Site Identity yang digunakan adalah logo Universitas Diponegoro dengan ukuran

maksimal 512x512 px. Cara : Klik Menu Appearance General Setting Site Identity Upload Image : Logo Undip Save and Publish.

6.7. Standarisasi Font

Font yang digunakan dalam Website yakni Open Sans dan Exo.

6.8. Theme Options

Berikut langkah untuk mengimport beberapa pengaturan pada theme options (Divi). Klik

Divi Theme Options klik Tombol Import & Export :

Pilih import Cari File :Theme Options Unit.json Klik Import Divi Theme Options.

Maka seluruh setting akan mengikuti beberapa hal yang telah ditetapkan dalam pedoman.

32

6.9. Theme Customizer

Berikut langkah untuk mengimport beberapa pengaturan pada theme customizer.

Klik Appearance Customize

Lalu, Klik tombol import & Eksport Pilih Import Cari File : Customizer Settings Unit

.json Klik Import Divi Customizer Settings. Maka seluruh setting akan mengikuti

beberapa hal yang telah ditetapkan dalam pedoman.

33

6.10. Standarisasi Header & Navigation

a. Primary Menu Bar

Primary menu bar merupakan menu utama dari sebuah website. Berikut langkah

untuk setting primary menu bar :

Klik menu Appearance Customize Header Navigation Primary Menu Bar

Lakukan setting seperti gambar di bawah :

Menu Height : 60, Logo Max Height : 60, Text Size : 13, Font type : Open Sans (Default

Theme Font), Background color : bisa disesuaikan dengan identitas Unit

34

b. Secondary Menu Bar

Secondary Menu Bar merupakan menu tambahan setelah menu utama, yang wajib

ada berdasarkan aturan standarisasi. Berikut langkah setting secondary menu bar :

Text size : 12

Font type : Open Sans / Default Background Color : Dapat disesuaikan dengan

identitas warna Unit

Contoh :

Background Color : #3D59AB (sesuai warna bendera pada Statuta Undip)

Text Color : #ffffff

Dropdown Menu Background color : #3D59AB

Dropdown Menu Text Color : #ffffff

Cara setting menu secondary (social media, email, dan telepon) :

Klik Menu Divi Theme Options General Cari pengaturan Facebook, twitter,

google+, dll lalu klik enable dan tulikan link alamat sosial media sesuai masing-masing

Unit.

35

c. Fixed Navigation Setting

Merupakan navigasi dalam posisi melayang saat di scroll, berikut langkah untuk

setting :

Masih dalam menu Header & Navigation Masuk ke Fixed Navigation Setting :

Fixed Menu Height : 55

Text Size : 13

Primary Menu BG Color : bisa disesuaikan ciri Unit

Secondary Menu BG Color : dapat disesuaikan dengan warna primary menu agar selaras.

Secondary Menu Link Color : #ffffff (usahakan selalu kontras)

Primary Menu Link Color : bisa disesuaikan

Header Elements

Untuk mengatur secondary menu, terkait dengan header elements, yaitu ceklist

show social icons dan button search, lalu isikan nomor telepon dan email .

36

6.11. Standarisasi Logo Header

Aturan : Logo Undip Warna Putih Transparan berada di sebelah kiri

Font : Arial , Warna : Putih, Nama Unit : Bold, Background Transparan (dapat mengedit file : logo

standar Unit tipe .*psd)

*warna Background biru hanya utk memperlihatkan struktur logonya.

Cara upload Logo pada Header :

Klik Menu Divi Theme Options General Logo : Pilih file Upload Save

6.12. Standarisasi Footer

- Layout : Four columns (4)

- Warna Background Footer : #00031c (atau bisa disesuaikan dengan identitas unit)

37

- Widget :

• Column 1 Text : berisi identitas Unit

• Column 2 Text : berisi layanan

• Column 3 Text : berisi tautan penting

• Column 4 Text : Lokasi (Maps) / Custom HTML

- Konten Footer Area

Pada menu Appearance klik customize Widgets Isi Footer Area Column 1

dst sesuai dengan standarisasi Footer :

Untuk mengedit bagian Footer (copyright ……) Appearance Customize Footer

Bottom Bar Pada Footer Credits dapat diisi dengan contoh :

Copyright © Universitas Diponegoro | 2020

Maka Hasilnya seperti di bawah ini :

38

6.13. Update Theme

Klik Divi Theme Options, lalu pilih tab UPDATE, masukkan kode berikut :

Username : Lisense

API key : c167503586cf5d22a36b4d88992fafea39d8a082 Klik Save

Update Theme Otomatis

KETERANGAN : 1. Pedoman di atas tidak membatasi jika Lembaga/Unit Kerja ingin menambah

konten-konten modul lain asalkan tetap memenuhi standar Universitas.

2. Universitas telah memberikan gambaran layout yang dapat diterapkan dan

disesuaikan dengan kebutuhan masing-masing Lembaga/Unit Kerja.

3. Themes tersebut di atas hanya digunakan untuk website yang memiliki sub domain

undip.ac.id