Konsep Pemodelan Desain Grafik

   

1.  Pengertian Desan dan Pemodelan Grafik

• Desain

Desain diterjemahkan sebagai seni terapan, arsitektur, dan berbagai pencapaian kreatif lainnya. Dalam sebuah kalimat, kata “desain” bisa digunakan baik sebagai kata benda maupun kata kerja. Sebagai kata kerja, “desain” memiliki arti proses untuk membuat dan menciptakan obyek baru. Sebagai kata benda, “desain” digunakan untuk menyebut hasil akhir dari sebuah proses kreatif, baik itu berwujud sebuah rencana, proposal, atau berbentuk obyek nyata.

 

sehingga desain merupakan suatu kegiatan kreatif yang menghasilkan sebuah rancangan ataupun hasil jadi yang inovatif sesuai denga keilmuan dan profesi khusus yang dijalani dan memiliki prinsip dan unsur yang sama.

•  Pemodelan

Model adalah rencana, representasi, atau deskripsi yang menjelaskan suatu objek, sistem, atau konsep, yang seringkali berupa penyederhanaan atau idealisasi. Bentuknya dapat berupa model fisik (maket, bentuk prototipe), model citra (gambar rancangan, citra komputer), atau rumusan matematis.

sehingga pemodelan adalah membentuk suatu benda-benda atau obyek. membuat dan mendesain obyek tersebut sehingga terlihat seperti hidup. Sesuai dengan obyek dan basisnya, proses ini secara keseluruhan dikerjakan di komputer. melalui konsep dan proses desain, keseluruhan obyek bisa diperlihatkan secara 3 dimensi, sehingga banyak yang menyebut hasil ini sebagai pemodelan 3 dimensi (3D modelling).

• Grafik (Grafis)

Grafik atau Grafis identik dengan suatu garis, titik, tanda, dan bentuk huruf. Grafik merupakan cara membentuk bentuk huruf, tanda serta gambar menggunakan proses pencetakan. Grafik juga didefinisikan sebagai suatu pembuatan, penyimpanan serta manipulasi model dan citra. 

Desain dan Pemodelan Grafik adalah suatu proses menciptakan objek berupa citra (gambar rancangan, citra komputer) yang dibuat untuk informasi, ilustrasi, atau hiburan yang dibuat melalui aplikasi komputer.

 

   2. Prinsip dan Unsur Desain Grafik

Prinsip Desain Grafik

 

• Keseimbangan
   
  Keseimbangan adalah keadaan atau kesamaan antara kekuatan yang saling berhadapan dan menimbulkan adanya kesan seimbang secara visual. Ada dua pendekatan dasar untuk menyeimbangkan. Yang pertama adalah keseimbangan simetris yang merupakan susunan dari elemen agar merata ke kiri dan ke kanan dari pusat/tengah. Yang kedua adalah keseimbangan asimetris yang merupakan pengaturan yang berbeda agar dua sisi memiliki bobot visual yang sama. Warna, nilai, ukuran, bentuk, dan tekstur dapat digunakan sebagai unsur penyeimbang. 

• Kesatuan
  
  
  Kesatuan adalah kohesi, konsistensi, ketunggalan atau keutuhan, yang merupakan isi pokok dari komposisi. contohnya adalah ilustrasi, garis dan teks diberi raster sehingga memberikan kesan kesatuan terhadap pesan yang dimaksud. Disini dibutuhkan penyatuan semua elemen agar terlihat serasi. Menyatukan elemen dengan mengelompokkan elemen-elemen tersebut. Ulangi warna, bentuk, dan tekstur. Gunakan grid (struktur yang mendasari halaman) untuk membangun kerangka kerja untuk margin, kolom, jarak, dan proporsi.

• Penekanan  
   
  Penekanan dimaksudkan untuk menarik perhatian pembaca, sehingga ia mau melihat dan membaca bagian desain yang dimaksud. Kalau dalam konteks desain surat kabar ini bisa dilakukan dengan memberikan kotak raster atas sebuah berita. hal ini akan mengesankan pentingnya berita itu untuk dibaca oleh pembaca. atau juga membesarkan ukuran huruf pada judul berita, sehingga terlihat jauh berbeda dengan berita lainnya. Penekanan juga dilakukan melalui perulangan ukuran, serta kontras antara tekstur, nada warna, garis, ruang, bentuk atau motif.
   

•  Ritme 
  
  
  Ritme atau irama adalah pola yang dibuat oleh elemen-elemen secara berulang dan bervariasi. Pengulangan (mengulangi unsur serupa secara yang konsisten) dan variasi (perubahan dalam bentuk, ukuran, posisi atau elemen) adalah kunci untuk ritme visual.
  
  
  
  
  
  
  Unsur Desain Grafik
  
  
  • Warna (Color)
  
  
  Warna merupakan unsur penting dalam obyek desain. Karena dengan warna orang bisa menampilkan identitas, menyampaikan pesan atau membedakan sifat dari bentuk-bentuk bentuk visual secara jelas.
  
  
  
  
  • Ukuran (Size)
  
  
  Ukuran adalah unsur lain dalam desain yang mendefinisikan besar kecilnya suatu obyek. Dengan menggunakan unsur ini Anda dapat menciptakan kontras dan penekanan (emphasis) pada obyek desain anda sehingga orang akan tahu mana yang akan dilihat atau dibaca terlebih dahulu.
   
  
  •  Ruang(space)
  
  
  Ruang merupakan jarak antara suatu bentuk dengan bentuk lainnya, pada praktek desain dapat dijadikan unsur untuk memberi efek estetika desain dan dinamika desain grafis. Sebagai contoh, tanpa ruang Anda tidak akan tahu mana kata dan mana kalimat atau paragraf. Tanpa ruang Anda tidak tahu mana yang harus dilihat terlebih dahulu, kapan harus membaca dan kapan harus berhenti sebentar. Dalam bentuk fisiknya pengidentifikasian ruang digolongkan menjadi dua unsur, yaitu obyek (figure) dan latar belakang (background).
  
  
  • Garis (Line)
    
    
  Sebuah garis adalah unsur desain yang menghubungkan antara satu titik poin dengan titik poin yang lain sehingga bisa berbentuk gambar garis lengkung (curve) atau lurus (straight). Garis adalah unsur dasar untuk membangun bentuk atau konstruksi desain. Di dalam dunia komunikasi visual seringkali kita menggunakan dotted line, solid line, dan garis putus-putus.
  
  
  • Bentuk (Shape)
    
       
  Bentuk adalah segala hal yang memiliki diameter tinggi dan lebar. Bentuk dasar yang dikenal orang adalah kotak (rectangle), lingkaran (circle), dan segitiga (triangle). Pada desain komunikasi visual kita akan mempelajari betuk dasar dan bentuk turunan. Sementara pada kategori sifatnya, bentuk dapat dikategorikan menjadi tiga, yaitu:
  
  
  Huruf (Character) adalah suatu hal yang direpresentasikan dalam bentuk visual yang dapat digunakan untuk membentuk tulisan sebagai wakil dari bahasa verbal dengan bentuk visual langsung, seperti A, B, C, dan seterusnya.
  
  
  
  
  Simbol (Symbol) adalah suatu hal yang direpresentasikan dalam bentuk visual yang mewakili bentuk benda secara sederhana dan dapat dipahami secara umum sebagai simbol atau lambang untuk menggambarkan suatu bentuk benda nyata, misalnya gambar orang, bintang, matahari dalam bentuk sederhana (simbol), bukan dalam bentuk nyata (dengan detail).
  
  
  Bentuk Nyata (Form) adalah bentuk yang mencerminkan kondisi fisik dari suatu obyek. Seperti gambar manusia secara detil, hewan atau benda lainnya.
   
  
  
  • Tekstur (Texture)
    
   
  Tekstur adalah tampilan permukaan (corak) dari suatu benda yang dapat dinilai dengan cara dilihat atau diraba. Yang pada prakteknya, tekstur sering dikategorikan sebagai corakdari suatu permukaan benda, misalnya permukaan karpet, baju, kulit kayu, cat dinding, cat canvas, dan lain sebagainya.
  
  
  • Ukuran(size) 
  
  
  Ukuran adalah unsur lain dalam desain yang mendefinisikan besar kecilnya suatu obyek. Dengan menggunakan unsur ini Anda dapat menciptakan kontras dan penekanan (emphasis) pada obyek desain anda sehingga orang akan tahu mana yang akan dilihat atau dibaca terlebih dahulu.
  
  
  
  
  
  
  
  3. Beberapa software dalam desain grafis
  
  
  
  
  Adobe Photoshop
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Kelebihan Adobe Photoshop :
  • Gambar yang dihasilkan lebih memuaskan.                                    
  • Mudah di operasikan.
  • Banyak sekali fitur – fitur yang unggul.
  • Bisa di gunakan untuk membuat tulisan dengan efek yang di inginkan. Buat kamu yang ingin membuat tulisan tampil beda dan menakjupkan Photoshop adalah jawabannya.
  • Bisa di gunakan untuk mendesain maupun untuk editing gambar.
  • Bisa membuat beragam material.
  • Bisa juga di gunakan untuk mengolah beberapa materi web. Buat kamu semua yang mempunyai web dan akan mengup-load foto tetapi ukuran foto terlalu besar.
  • Familyar dalam kalangan kita.
  • Fasilitas untuk editing lebih lengkap di banding lainnya.
  • Bisa untuk rekayasa foto. Di dalam Photoshop temen temen bisa bebas berekspresi foto asli yang temen temen punya bisa dijadikan seakan akan seperti gambar, keren kan?!
  • Bisa menambah efek lagi meski sudah terlalu banya efek.
  • Penyimpanan dapat menggunakan berbagai format. Format penyimpanan tidak sekedar PSD, namun JPEG dan yang lainnya.
  • Photoshop lebih cepat kerjanya.
  
  
  Kekurangan Adobe Photoshop :
  • Banyaknya layer yang di gunakan. Kebanyakan orang sering bingung dengan banyaknya layer yang digunakan saat mengedit foto/ yang lainnya di Photoshop
  • Saat digunakan untuk pembuatan majalah dan brosur. Photoshop kurang baik saat digunakan untuk pembuatan majalah dan brosur karena tidak bisa sempurna saat pembuatan paragraf.
  • Ukuran yang di butuhkan terlalu besar. Nah jika kita terlalu banyak menggunakan layer maka ukuran di Photoshop akan besar.
  • Kertas cetak. Saat akan mencetak hasil Photoshop kertas yang digunakan relatif sulit.
  
  
  
  
  Coreldraw
  
  
  
  
  
  
  
   
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Keunggulan dari Coreldraw       
  
  
  ·         Gambar berbasis vektor adalah ukuran hasil akhir yang dapat ditekan seminimal mungkin namun dengan kualitas yang tidak kalah dengan gambar berbasis raster atau bitmap. Karena itulah desain grafis dan olah gambar berbasis vektor sangat banyak digunakan untuk desktop publishing, percetakan, dan bidang lain yang memerlukan pemrosesan visual.
  ·         Selain karena tampilannya yang user friendly dan mudah dipelajari
  ·         Coreldraw sangat bagus dalam kolaborasi teks dan gambar. Meskipun photoshop juga bisa namun lebih mudah dengan coreldraw.
  ·         Dukungan forum dan komunitas coreldraw yang begitu banyak dan beragam, sehingga kita bisa dengan mudah menemukan tutorial, tips dan bisa berbagi ilmu dengan pengguna coreldraw lainnya di seluruh dunia.
   
   Kekurangan dari coreldraw :
  ·        Memakan memori dan resource lain yang sangat besar apalagi bila gambar yang sedang dibuat mempunyai detail yang banyak. Pada PC yang low end penggunaan CDR sering menimbulkan pesan ‘crash’ pada system bahkan dalam proses effect bevel/emboss dalam PC yang bagus pun dapattimbul ‘hang’.
  ·         Besar file yang dibuat membengkak
  ·        Warna yang dicetak tidak akurat (tidak sesuai dengan tampilan layar) pada beberapa jenis printer
  ·        Dalam pembuatan objek table tidak semudah membuat table dalam MS Word. Yaitu dengancara yang sangat manual
  ·        Apabila ada penggabungan objek vector dan photo/bitmap kualitas cetakannya kurang memuaskan, misalnya membuat cover buku yang terdapat objek text dan photo.
  ·       Kompatibilitas versi CorelDraw banyak kendala dalam sharing keversilainnya.
  
  

  Adobe Ilustrator

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  Kelebihan Adobe Illustrator  :
  • Toolbar yg disediakan cukup Komplit
  • Fiturnya cukup lengkap.
  • Ampuh untuk pembuatan illustrasi, logo, dan vector image lainnya.
  • Kemampuan yang mumpuni untuk load file besar, diatas 50mb.
  • Warna-warna yang disediakan sangat baik dan halus, tidak jauh beda dengan hasil print nantinya.
  • Seri Semua produk adobe dapat terkenoneksi dengan user di seluruh dunia, hal ini untuk mempermudah sharing.
  • Proses lebih ringan dan lebih cepat
  • Adobe Illustrator  mempunyai kemampuan, fitur dan fasilitas yang benar -benar dapat diandalkan untuk memudahkan pekerjaan kreatif Anda.
  • Tampilan terbaru Adobe Illustrator . ini sangat ramah penggunan, dan memiliki design elegan dan tidak menyakitkan mata. Penggunaannya sangat mudah sehingga dapat mengakses beragam fitur yang ada terutama dengan sistem pengelompokan fasilitas melalui menu, toolbox, pallete dan sebagainya.
  • Adobe Illustrator   kompatibel dengan bermacam software lain untuk berbagai kepentingan akhir, seperti kepentingan cetak, desktop publishing, web publishing dan lain-lain.
  • Adobe Illustrator  sangat mumpuni dalam menangani beragam pekerjaan desain dari yang sifatnya sederhana hingga amat kompleks, serta mampu mengekspor hasil akhir sebuah desain ke dalam berbagai format sesuai kebutuhan Anda dengan kualitas yang bisa diandalkan.
  
  
  Kekurangan Adobe Illustrator:
  • Walaupun fitur lengkap tapi cukup ribet untuk pengerjaan layout.
  • Tidak User friendly untuk fitur power clip-nya
  • Tempat produksi terkadang ada yang ngga support
  • Untuk mengedit atau memberi efek pada foto sangat susah
  • Harus didukung dengan pc yg sesuai dengan design
  
  
  
  
  
  
  
  
  
  
  Sumber :
  
  
  http://www.academia.edu/11097842/DESAIN_PEMODELAN_GRAFIS
  https://mxac.wordpress.com/2016/10/06/pengertian-desain-dan-pemodelan-grafik/
  https://ezadityo.wordpress.com/2016/10/23/pengertian-desain-dan-pemodelan-grafik/
  http://kelasdesain.com/keunggulan-dan-kelemahan-photoshop/
  http://digitalsolution.co.id/10-kelebihan-dan-kekurangan-corel-draw/
  http://devina2.blogspot.com/2015/01/kekurangan-dan-kelebihan.html
  http://ngestalk-ilmukomputer.blogspot.com/2015/12/kelebuhan-dan-kekurangan-adobe.html
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
   

 

Web Biodataku

1. Flowchart  

Program flowchart adalah suatu bagan dengan simbol-simbol tertentu yang menggambarkan urutan proses secara mendetail dan hubungan antara suatu proses (instruksi) dengan proses lainya dalam suatu program(Widia,1983:4).

a. Gambar halaman utama (Homepage)

b. Gambar halaman Biodata

c. Gambar halaman riwayat pendidikan

 
  
   















Berdasrkan rancangan pada tampilan di atas, flowchart pada web biodataku dapat dibuat sbb :

  

      

Dari gambar flowchart di atas dapat dijelaskan bahwa :

1. User/pengguna pilih "start" yang diwakili oleh simbol terminator yang menggambarkan    kegiatan awal dari suatu proses.
2. Kemudian ditampilkan halaman utama yang diwakili oleh simbol  proses yang berfungsi menggambarkan suatu proses.
3. setelah menampilkan halaman utama, user disediakan beberapa pilihan. dimana setiap pilihan yang ada disediakan oleh simbol decision yang berfungsi menggambarkan suatu keputusan atau tindakan yang harus diambil pada kondisi tertentu(T/F).
4. jika user memilih "Home" maka user akan tetap berada di halaman utama, ditujukan dengan simbol line connector yang mengarah ke " Menampilkan Tampilan Utama"
5. jika pilih "Biodata" maka user akan dibawa/masuk ke "Tampilan Biodata" yang ditujukan dengan simbol off-page-reference yang berfungsi menghubungkan suatu simbol dengan simbol yang lainnya pada bagian yang berbeda.
6. jika pilih "R.P(Riwayat Pendidikan) maka user akan dibawa/masuk ke "Tampilan Riwayat Pendidikan".
7. simbol terminator "End" menggambarkan akhir dari suatu proses

2. Algoritma 
   Algoritma dari web biodataku berdasarkan flowchart diatas yaitu

1. Start
2. Menampilkan Tampilan Utama
3. if pilih = Home then
4. kembali ke Tampilan Utama
5. else if pilih = Biodata then
6. Menuju ke Tampilan Biodata
7. else if pilih = R.P(Riwayat Pendidikan) then
8. Menuju ke Tampilan Riwayat Pendidikan
9.  else
10. end
11. end if

3. SourceCode 

   a.  HTML  :
<!DOCTYPE html>
<html lang="en" id="home">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>MyBiodata</title>
  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- Navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid"></div>
      <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#home" class="navbar-brand page-scroll" >Home</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-left">
       <li><a href="#about" class="page-scroll">Biodata</a></li>
       <li><a href="#pendidikan" class="page-scroll">Riwayat Pendidikan</a></li>
     </ul>
   </nav>
   <!-- Akhir navbar -->
   <!--Jumbotron -->
   <div class="jumbotron text-center">
    <h1>Welcome to My Web</h1>
    <h2>My Biodata</h2>
    <img src="img/fitri.jpg" class="img-circle">
    <p>Fitri Wabula | 52416895</p>
  </div>
  <!-- Akhir jumbotron -->

  <!-- about -->
  <section  class="about text-center" id="about">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 text center">
         <center><h2>About me</h2></center>
         <hr>
         <a href="">
          <img src="img/potho/1.png" class="img-circle">
        </a>
      </div>
    </div>
  </div>
</section>
<!-- Akhir about -->

<!-- Tabel about -->
<section>
  <div></div>
  <center>
    <table border="2" id="bagan">
      <tr style="background-color: gold;">
        <td>Biodata</td>
        <td>Keterangan</td>
      </tr>
      <tr>
       <td>Nama </td>
       <td>Fitri Wabula</td>
     </tr>
     <tr>
       <td>TTL </td>
       <td>Masohi-06-05-1998</td>
     </tr>
     <tr>
      <td>Jenis Kelamin</td>
      <td>Perempuan</td>
    </tr>
    <tr>
      <td>Tinggi/Berat badan</td>
      <td>150cm/60kg</td>
    </tr>
    <tr >
      <td>Status</td>
      <td>Belum menikah</td>
    </tr>
    <tr>
      <td>Hoby</td>
      <td>menonton Anime</td>
    </tr>
    <tr>
      <td>Filem favorite</td>
      <td>Ga-Rei: Zero (2008) dan Violet evergarden</td>
    </tr>
    <tr>
      <td>Lagu Favorite</td>
      <td>Liam Payne, Rita Ora - For You </td>
    </tr>
    <tr>
      <td>Makanan favorite</td>
      <td>Bakso dan Ice cream</td>
    </tr>
    <tr>
      <td>Olahraga favorite</td>
      <td>Badmintoon</td>
    </tr>
  </table>
</center>
</section>
<!-- Akhir tabel about -->
<!-- gambar pendidikan -->
<section  class="pendidikan text-center" id="pendidikan">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 text center">
       <center><h2>Riwayat Pendidikan</h2></center>
       <hr>
       <a href="">
        <img src="img/potho/2.png" class="img-circle">
      </a>
    </div>
  </div>
</div>
</section>
<!-- akhir gambar pendidikan -->
<!-- tabel pendidikan -->
<section class="pendidikan">
  <center>
    <table border="2">
      <tr style="background-color: skyblue;">
        <td>Riwayat Pendidikan</td>
        <td>Keterangan</td>
      </tr>
      <tr>
       <td>Nama </td>
       <td>Fitri Wabula</td>
     </tr>
     <tr>
       <td>NPM </td>
       <td>52416895</td>
     </tr>
     <tr>
      <td>Kelas</td>
      <td>2IA20</td>
    </tr>
    <tr>
      <td>Alamat</td>
      <td> Jalan jatiluhur raya, Jakasampurna Bekasi Timur</td>
    </tr>
    <tr>
      <td>Perguruan Tinggi</td>
      <td>Universitas Gunadarma (2016-2020)</td>
    </tr>
    <tr>
      <td>Jurusan</td>
      <td>Teknik Informatika</td>
    </tr>
    <tr>
      <td>Fakultas</td>
      <td>Teknologi Informatika</td>
    </tr>
    <tr>
      <td>Jenjang</td>
      <td>S1</td>
    </tr>
    <tr>
      <td>Sekolah Dasar</td>
      <td>SD N 4 Masohi(2004-2010)</td>
    </tr>
    <tr>
      <td>Sekolah Menengah Pertama</td>
      <td>Smp N 2 Ambon(2010-2013)</td>
    </tr>
    <tr>
      <td>Sekolah Menengah Atas</td>
      <td>SMA N 11 Ambon(2013-2016)</td>
    </tr>
  </table>
</center>
</section>
<!-- Akhir tabel pendidikan -->
<section></section>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

 b. CSS  :

.jumbotron img{
 width: 250px;
 border: 4px solid beige;
}

.about hr{
 width: 200px;
 border-top: 4px solid grey;
 min-height: 20px;
}
section{
 min-height: 400px;
}

.about img{
 width: 250px;
 border: 4px solid moccasin;
}
td{
 width: 250px;
 height: 34px;
}

.pendidikan img{
 width: 250px;
 border: 4px solid purple;
}
.pendidikan hr{
 width: 300px;
 border-top: 4px solid grey;
 min-height: 20px;
}
.pendidikan {
 background-color: ;
}



c. JavaScript  :

// event pada saat link di klik
$('.page-scroll').on('click', function(e){
//ambil isi href(# id )
var tujuan = $(this). attr('href');
//tangkap elemen ybs
var elemenTujuan = $(tujuan);
//pindahkan scroll
$('body').animate({
 scrollTop: elemenTujuan.offset().top -50
}, 1200, 'easeInOutExpo');

e.preventDefault();
});

Referensi :
http://umardanny.com/contoh-flowchart-program-sistem-pakar/

Sejarah internet, penggunaan dan penerapan new media

1. Sejarah internet

    internet merupakan sebuah jaringan komputer yang sering digunakan untuk mempermudah pekerjaan manusia. internet pertama kali dibentuk oleh Departemen Pertahanan Amerika Serikat pada tahun 1969, melalui sebuah proyek lembaga ARPA yang mengembangkan jaringan yang dinamai ARPANET(Advanced Research Project Agency Neetwork), dimana mereka mendemostrasikan bagaimanan dengan hardware dan software komputer berbasis Unix.

ARPANET diperkenalkan secara umum pada bulan Oktober 1972. Proyek ARPANET merancang bentuk jaringan, kehandalan, seberapa besar informasi dapat dipindahkan, dan akhirnya semua standar yang mereka tentukan menjadi cikal bakal pembangunan protokol baru yang sekarang dikenal sebagai TCP/IP(Transmission Control Protokol /Internet Protokol)

dibangunnya proyek tersebut yaitu untuk keperluan militer. pada saat itu Departement Pertahanan Amerika Serikat (US Department of Defense) membuat sistem jaringan komputer yang tersebar dengan menghubungkan komputer di daerah-daerah vital untuk mengatasi masalah bila terjadi serangan nuklir dan untuk menghindari terjadinya informasi terpusat yang apabila terjadi perang dapat mudah dihancurkan.

awalnya ARPANET hanya menghubungkan 4 situs saja pada beberapa universitas saja yaitu Stanford Research Institute, University of California, Santa Barbara, University of Utah dan membentuk satu jaringan terpadu pada tahun 1969. tidak lama kemudian proyek ini berkembang pesat di seluruh daerah dan semua Universitas di negara tersebut ingin bergabung sehingga membuat ARPANET kesulitan mengaturnya.

Sehingga dipecah menjadi dua yaitu "MILNET" untuk keperluan militer dan "ARPANET " baru yang lebih kecil untuk keperluan no-militer seperti universitas-universitas. Gabungan kedua jaringan dikenal dengan nama DARPA Internet, yang kemudian disederhanakan menjadi intermet.

2. Penggunaan dan Penerapan new media

new media merupakan sebuah media yang digunakan sebagai alternatif yang efisien untuk menyampaikan informasi kepada khayalak umum atau masyarakat sehingga dapat memperoleh akses informasi dan berita dengan cepat, contohnya media online, jurnalistik online, media sosial dan media-media yang menggunakan jaringan internet.

internet bermula dari istilah Cyberspace yang diperkenalkan oleh William Gibson dalam bukunya yang berjudul Neuromancer(1984). istilah Cyberspace untuk menjelaskan dunia maya berdimensi tiga seperti senyatanya(virtual reality). hasil temuan teknologi informasi sekaligus komunikasi inilah yang mampu membentuk jejaring komputer sejagat yang kemudian dikenal dengan istilah internet.

internet juga dianggap memiliki kapasitas besar sebagai media baru. tidak hanya memperkecil jarak dalam mengkomunikasi pesan, penyebaran dari internet ini bisa mencapai jangkauan yang sangat luas satu orang khalayak bisa mengunduh kemudian menyebarkannya pada orang-orang dalam jaaringna pertemanan atau jaringan kerjanya. kemudian pihak yang mendapatkan sebaran itu bisa menyebarkanannya lagi pada orang-orang dalam jaringan dan seterusnya.

keuntungan dari new media yaitu

1. penyajian informasi yang cepat sehingga informasi senantiasa up to date (terbaru). Reporter atau wartwan dapat mengirimkan atau menyajikan laporan jurnalistik mereka secara langsung dan cepat dibandingkan media konvensional dimana media konvensional atau media cetak jika ingin menurunkan berita harus menunggu keesokan harinya.
2. lebih efisien dan akurat
3. lebih mudah diakses oleh khalayak dimana saja dan  kapan saja melalui koneksi internet
4. harganya murah
5. lebih simple dan praktis
6. berguna dalam menjalankan suatu usaha secara online
7. khalayak dapat menemukan informasi apa saja dengan cepat 
8. terjangkau digunakan oleh khalayak melalui koneksi internet
9. bisa mengetahui harga pasar usaha dan melihat kondisi pasar usaha yang sedang maju

teknologi yang digunakan oleh new media memunculkan karakteristik tersendiri. karakteristik ini menjadi hal yang membedakan antara media baru dan media lama. karakteristik tersebut adalah

1. Digital, merupakan sinyal data dalam bentuk angka/bilanganyang dapat mengalamu perubahan secara tiba-tiba. selanjutnya sinyal data ini akan diproses dalam berbagai bentuk yang nantinya bisa dibentuk sebagai informasi
2. interktif, yaitu khalayak melakukan umpan balik langsung. dalam hal ini manusia lebih interaktif menanggapi suatu proses informasi yang terjadi / melakukan interaksi sosial dalam hak ini yaitu berbagi informasi, saling memberikan komentar melakukan feedback antar sesama pengguna media itu sendiri.
3. Hypertextual, yaitu halaman web yang menghubungkan kita ke teks atau dokumen lain
4. virtual, adalah sebuah dunia maya dimana semua itu hanyalah bayangan dunia tidak nyata. walaupun didunia maya namun terasa nyata karena seolah-olah kita berada didalamnya. contoh game online.
5. networked, merupakan jaringan antar komputer yang menghubungkan satu komputer dengan jaringan lainnya/aktivitas yang berhubungan dengan jaringan
6. simulation, yaitu menggambarkan dunia didalamnya sedekat mungkin dengan dunia nyata dan memperhatikan dengan tajam berbagai faktor. tidak beda jauh dengan virtual contohnya simuksi menerbangkan pesawat terbang.

di era perkembangan dunia moderen saat ini membuat new media memiliki dampak positif dan dampak negatif. dampak positif yaitu seperti yang sudah disinggung pada penjelasan sebelumnya yaitu informasi semakin cepat di dapatkan, dll. dan dari dampak negatifnya yaitu terdapat informasi-infromasi/berita palsu yang dipublikasikan oleh pihak-pihak yang tidak bertanggung jawab, dll.

DAFTAR PUSTAKA

https://www.slideshare.net/CharlesSetiadi/makalah-tekinternet-dan-new-media

https://id.wikipedia.org/wiki/Sejarah_Internet

https://www.kompasiana.com/esli/konsekuensi-penggunaan-new-media_57601e7325b0bd1c159a631e

https://www.kompasiana.com/www.radencahyoprabowo.blogspot.com/manfaat-media-online-media-baru-new-media-dalam-era-modernisasi-dan-digitalisasi_552e25236ea834130c8b456b