Tutorial Desain Web

Membuat Struktur Organisasi di Website

Mungkin sebagian orang bingung bagaimana membuat kotak-kotak diagram atau chart bermodel struktur organisasi untuk di tampilkan di website atau blog.

Sebenarnya cara ini adalah kombinasi dari pembuatan struktur organisasi manual dan menampilkannya di website atau blog.

Untuk aplikasi struktur organisasi berbasis web yang otomatis masih saya kembangkan. Pada program ini, user tinggal memasukkan saja nama dan juga jabatan atau posisi yang diinginkan. Selanjutnya aplikasi akan secara otomatis menampilkan data struktur organisasi berdasarkan level jabatan yang di masukkan.

Namun, jika mau lebih cepat dan simpel gunakan cara ini saja. Tidak begitu susah, tinggal buat diagram struktur organisasi Kamu, kemudian masukkan script ini di web atau blog Kamu.

Cara Membuat

  1. Buat file baru dan buatlah struktur organisasi seperti biasa
  2. Simpan file tersebut kedalam format pdf, karena file ini dapat dibuka melalui internet secara langsung.
  3. Upload file pdf tersebut pada web server kamu atau media penyimpanan dokumen
  4. Simpan linknya dan copy

Cara memasan di web

Jika Kamu menggunakan web berplatform wordpress atau blogspot. Cara ini cukup simpel untuk menampilkan struktur organisasi di web agar dapat dilihat diinternet secara online.

Caranya:

Masukkan saja script ini di halaman postingan web Kamu, dan buat mode posting berupa html.

<iframe src=”https://docs.google.com/gview?url=http://dipersip.riau.go.id/wp-content/uploads/2017/09/STRUKTUR-ORGANISASI-DINAS-PERPUSTAKAAN-DAN-KEARSIPAN.pdf&#038;embedded=true” style=”width:100%; height:500px;” frameborder=”0″></iframe>

Silahkan ganti link berwarna merah tersebut dengan link dimana Kamu upload file pdf td.

Membuat Halaman baru web

Jika struktur ogranisasi tidak ingin ditampilkan di halaman postingan, namun ingin di buat tersendiri halaman baru berupa file web htmlnya. Silahkan buat file script diatas eperti ini:

<html>

<head>

<title>STRUKTU ORGANISASI</title>

</head>

<body>

<iframe src=”https://docs.google.com/gview?url=http://dipersip.riau.go.id/wp-content/uploads/2017/09/STRUKTUR-ORGANISASI-DINAS-PERPUSTAKAAN-DAN-KEARSIPAN.pdf&#038;embedded=true” style=”width:100%; height:500px;” frameborder=”0″></iframe>

</body>

</html

Untuk tampilannya seperti ini:

Cara menampilkan struktur organisasi di website

Cara menampilkan struktur organisasi di website

Demikian cara simpel, membuat dan menampilkan struktur organisasi secara online di web. Untuk Menampilkan struktur organisasi secara otomatis tinggal mengetik nama dan jabatan saja, dapat menggunakan aplikasi yang sedang saya kembangkan.

Untuk contoh di atas, struktur organisasi yang digunakan adalah struktur organisasi di salah satu website Dinas yang ada di Provinsi Riau.

Postingan berikutnya

  1. cara membuat bagan organisasi
  2. cara membuat struktur organisasi php
  3. koding membuat struktur organisasi di web
  4. membuat struktur organisasi dengan css
  5. membuat struktur pegawai codeigniter
  6. memvaut struktur organisasi di website

Membuat Desain Responsive

Cara Mebuat Desain Responsive (Bootstrap) – Perkembangan teknologi membuat website dan aplikasi web dapat diakses melalu banyak perangkat. Dahulu website di akses melalui jaringan internet menggunakan komputer atau pc yang terkoneksi ke internet. Namun dengan kecanggihan teknologi yang semakin pesat aplikasi web dapat diakses dari banyak perangkat atau gadget. Perangkat tersebut kini sudah semakin mobile. Beberapa gadget yang sekarang banyak digunakan untuk mengakses internet misal smart phone, table, ipad dan banyak perangkat lainya.

Berdasarkan latar belakang tersebut para pengembang aplikasi khususnya web menciptakan konsep responsive pada web yang sekarang di kenal dengan istilah bootstrap. Bootstrap atau tampilan responsive adalah sebuah tampilan yang fleksibel mengikuti ukuran perangkat dalam akses internet.

Nah untuk yang beru belajar bagaimana cara buat web agar dapat di akses dari handphone atau hp dapat menggunakan beberapa dasar template yang sudah di kembangkan di beberapa pengembang desain mobile berikut ini. Inti dari bootstrap atau reponsive adalah pada casecading style sheet atau CSS.

Buat yang masih bingung perbedaan tampilan responsive, cara melihatnya dapat langsung mengakses melalu perangkat handphone atau juga dapat menggunakan browser semisal google chrome atau juga mozilla dan sejenisnya. Caranya yaitu dengan mengecilkan browser yang digunakan untuk mengaksesnya.. Berikut contohnya.

Contoh sebelum browser di kecilkan

Cara Mebuat Desain Responsive (Bootstrap)

Cara Mebuat Desain Responsive (Bootstrap)

contoh seduah browser di kecilkan

Cara Mebuat Desain Responsive (Bootstrap)

Cara Mebuat Desain Responsive (Bootstrap)

Mebuat Desain Responsive

Konsep dari tampilan mobile atau responsive adalah mengunakan style berdasarkan persentase. Untuk dasar pembuatan template website bootstrap dapat menggunakan yang sudah ada dan di kembangkan beberapa website berikut ini.

1. getbootstrap.com

Sebuah situs yang menyediakan beberapa dasar dan juga panduan menggunakan template responsive.

Beberapa template yang ada diantaranya:

  1. Starter template
  2. Boostrap theme
  3. Grids
  4. Jumbotron
  5. Narrow Jumbotron
  6. Navbars in action
  7. Custom components

getbootstrap

Untuk download beberapa jenis template diatas disni

2. startbootstrap.com

Pada website ini template yang disajikan lebih terkesan menarik dan siap digunakan dibandingkan dengan situs diatas. Untuk website diatas lebih berfokus ke dasar-dasar bootstrap. Pada web ini menjadikan jenis template semisal untuk admin dan juga tampilan web atau blog.

Template yang ada pada startbootstrap  yaitu:

  1. Creative
  2. Clean blog
  3. agency
  4. freelancer
  5. dan masih banyak lagi

startbootstrap

Untuk mendownload templatenya disini

3. wrapbootstrap.com

Pada website ini template yang disajikan sangat menarik dan atraktif. Namun sayangnya banyak juga template yang di tampilkan tidak gratis alias berbayar. Namun buat kamu yang pengen belajar membuat desain yang menarik tidak ada salahnya mencoba beberapa template berbasar yang ada disitu sini

wrapbootstrap

Untuk download templatenya disni

Demikian panduan singkat mengenai bagaiman acara membuat template mobile friendly semoga bermanfaat. Caranya dari pada bingung membuat dari awal, tinggal download beberapa template diatas, kemudian edit sesuai dengan kebutuhan.

Postingan berikutnya

  1. contoh script web responsive

Desain Web Penilaian Kinerja Karyawan

Desain Web Penilaian Kinerja Karyawan. Berikut ini adalah beberapa desain menarik web yang dapat kita gunakan untuk melakukan penilaian karyawan. Penilaian ini misalnya sebuah evaluasi karyawan, perangkingan prestasi pegawai, memantau kinerja staff perusahaan dan kegiatan lainya yang berhubungan dengan sistem administrasi pegawai atau staff karyawan.

Desain web karyawan

# Desain 1

Web statistik karyawan

Web statistik karyawan

Desain diatas adalah desain cms joomla yang juga menarik untuk dijadikan referensi sebagai model web penilaian karyawan. Model desain menu horizontal membuat visibility terlihat simpel dan tidak monoton. Hal ini di tunjukkan dengan adanya shortcut menu yang tampilan pada awal bagian atau dashboar utama.

# Desain 2

Web peringkat karyawan

Web peringkat karyawan

Menilai Web peringkat karyawan karyawan dapat dilakukan dengan web sistem. Desain diatas sangat sesuai untuk mengetahui peringkat karyawan. Pada tampilannya menu navbar tersusun di atas dengan model horizontal yang tersusun dari bagian sebelah kanan Beralih kesedikit bagian bawahnya terdapat shortcut baris data yang bisa digunakan untuk menghisi detail peringkat yang dimaksud, misalkan jumlah sales, jumlah klien, dan juga order yang di dapat sales atau karyawan. Berlanjut ke bawah lagi terdapat chart atau grafik yang dapat langsung digunakan untuk memantau peringkat karyawan secara realtime.

# Desain 3

tes kinerja karyawan

tes kinerja karyawan

Untuk disain diatas hampir sama dengan model pada desain no 2 konsepnya Namun untuk desain web dasboad yang ini lebih terlihat elagan dan menarik. Untuk desain ini juga di lengkapi dengan fitur pencarian data hal ini lebih memudahkan jika memang jumlah karyawan atau pegawai sangat banyak. Selain grafik data yang di tampilan lainya yaitu, aktivitas terakhir, detail berita-berita tentang karyawan.

# Desain 4

Penilaian karyawan

Penilaian karyawan

Warna dominan yang ada pada desain diatas adalah abu-abu. Desain dengan konsep tersebut lebih terkesan simpel dan ringan. Hal tersebut ditunjukkan dengan shortcut detail informasi yang lebih terlihat flat atau datar. Selain itu firut yang dapat digunakan dengan theme atau templatenya yaitu grafik dan juga peta informasi lainya. Untuk menu tersusun vertikal di sebelah kiri tampilan.

# Desain 5

Seleksi pegawai

Seleksi pegawai

Untuk tampilan menu tersusun horizontal dengan shortcut data terletak dibawahnya. Pada desain ini grafik terdapat tiga buah dan untuk bagian selanjutnya yaitu itu dibawahnya terdapat aktivitas terbaru dan sebelah kanannya terletak input informasi.

# Desain 6

Meningkatkan mutu karyawan

Meningkatkan mutu karyawan

Warna dominan yang ada yaitu putih dan biru muda. Untuk menu terdapat dua model pertama terletak pada bagian atas dengan konsep horizontal yang tersusun dari sebelah kanan. Selanjutnya menu tersusun di sebelah kiri. Beralih kesebelah kanannya terdapat grafik sebagai pemantau kinerja karyawan.

# Desain 7

Mengetahui kualitas karyawan

Mengetahui kualitas karyawan

Susunan menu terletak di bagian sebelah kiri hampir sama dengan sebelumnya. Dan untuk bagian navbar atas diisi dengan menu detail profil. Masuk kebagian utamanya yaitu tengah-tengah terdapat Shortcut data dengan model speedometer atau paramater berbentuk melingkar yang menggunakan warna sebagai indikator datanya

Kemudian berlanjut ke bawahnya terdapat grafik, dan dengan shortcut data penting lainya berbentuk persegi atau kotak di bagian bawahnya.

# Desain 8

Kinerja pegawai

Kinerja pegawai

Desain diatas konsepnya sama dengan  desain 7 yaitu menu detail profil di navbar atas yang membentang daris belah kanan ke kiri. Kemudian menu sebelah kiri, dan selanjutnya di bagian tengah terdapat shortcut data dan disusul lagi grafik di bawahnya yang berlanjut aktivitas terakhir terletak pada sebelah kanannya. Dan posisi berikutnya di isi grafik berbentuk batang dan juga speedometer.

# Desain 9

Desain web sistem

Desain web sistem

Secara umum susunan menu dan modelnya sama. Letak perbedaannya yaitu terdapat pada menu navbar vertikal yang terdapat disebelah kiri yang fitur lainya yaitu dapat dirubah warna dan juga di minimalkan atau di perkecil

Demikian ulasan desain web sistem. semoga bisa menjadi referensi. Jika membutuhkan halaman dasboard seperti diatas Anda dapat menghubungi kami.

Postingan berikutnya

  1. source code aplikasi web penilaian kinerja pegawai
  2. source code penilaian kinerja pegawai