Di Lingkungan Universitas Diponegoro€¦ · Direktorat Data dan Sistem Informasi Biro Administrasi...
Transcript of Di Lingkungan Universitas Diponegoro€¦ · Direktorat Data dan Sistem Informasi Biro Administrasi...
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