print

Print

Menyampaikan pesan

Desain grafis disajikan untuk target penonton melalui berbagai media dari selebaran untuk poster dan website. Dengan demikian, bab ini menunjukkan bagaimana pesan yang berbeda-beda disampaikan dengan menggunakan teknik “luas array”, alat dan metode. Ini terlihat pada hasil akhir dari proses desain dan pekerjaan yang melihat, seringkali masyarakat umum berinteraksi.

Bab ini berfokus pada berbagai platform bahwa desainer miliki cara mereka sendiri untuk memberikan pesan yang kuat dan spesifik - dari cetak dan layar sampai dengan desain lingkungan dimana sepotong sebenarnya bentuk bagian dari lingkungan fisik.

Percetakan adalah istilah kolektif yang mengacu pada berbagai metode yang digunakan untuk menerapkan tinta ke substrat seperti mengimbangi litografi, layar-percetakan, gravure,

letterpress, panas-logam, lino cut, termografi, ink-jet dan laser pencetakan. Metode ini memungkinkan teks dan gambar yang akan dicetak pada berbagai substrat dari kertas dan karton, untuk keramik dan tekstil.

Percetakan adalah sebuah proses yang banyak digunakan untuk memproduksi buku, majalah dan publikasi lainnya. Berbagai proses pencetakan yang berbeda tersedia memberikan desainer berbagai fleksibilitas dalam selesai, yang dapat diperoleh dalam produk akhir dan memungkinkan untuk mencetak.

Selain menempatkan tinta pada stok, proses yang berbeda juga dapat memberikan pekerjaan karakteristik lain yang dihasilkan dari proses itu sendiri. Sebagai contoh, tekanan yang digunakan oleh proses letterpress meninggalkan lekukan halus di stok dan menyebabkan Perbedaan halus pada jumlah dalam tinta yang disimpan ke stok. Thermography dan layar-cetak produk karakter yang memiliki permukaan sedikit terangkat. Semua proses ini menambahkan elemen taktil untuk desain. Proses pencetakan sering diabaikan ketika Pekerjaan sedang dirancang untuk cetak, tetapi desainer suatu keharusan memperhitungkan proses pencetakan untuk memastikan bahwadampak visual dioptimalkan.

Cara tinta yang berbeda mencetak dalam standar empat warna proses pencetakan dapat diubah untuk menghasilkan efek visual yang berbeda, seperti pada teknik overprinting, surprinting dan penambahan dari shiners. Proses cetak yang dipilih untuk pekerjaan dan bagaimana hal itu ditentukan memiliki dampak besar pada biaya pekerjaan dan jadwal produksinya. Kreatif penggunaan Proses cetak berarti bahwa seorang desainer dapat mengatasi beberapa pembatasan keterbatasan anggaran, yang dapat membatasi pekerjaan untuk memiliki dua warna daripada empat. Pemilihan metode pencetakan ditentukan oleh beberapa faktor, meskipun untuk sebagian besar pekerjaan yang paling penting mencetak biaya dan oplah kuantitas. Setiap metode pencetakan telah tertentu membatasi karakteristik yang berbeda dari proses ke proses. Ini dapat mempengaruhi kecepatan pencetakan, jumlah warna dicetak, jenis kertas saham dan kertas format atau ukuran.

Editions de La Martiniere

(Atas dan kiri)

Ini adalah La Terra, Vue du Ciel oleh Yann Arthus-Bertrand, yang dirancang oleh Research Studio. Ini berisi gambar bumi diambil dari udara. Ini kolektor edition memiliki format yang sangat besar dengan sisi panjang berukuran 70cm, menyediakan ruang yang cukup untuk membiarkan gambar datang ke hidup dan terkesan pembaca.

Acordis (atas)

Brosur Badan luas untuk Acordis fitur bertahap halus tinta untuk menciptakan lembut cetak, halus yang dapat digunakan untuk menyajikan informasi tentang kain halus. Perawatan dan Perhatian diambil alih pencetakan mencerminkan perawatan dan perhatian diambil alih kain.

Komunikasi internal

Selain berkomunikasi dengan dunia pada umumnya, banyak perusahaan dan organisasi juga menghasilkan berbagai komunikasi internal untuk mereka karyawan, baik di media cetak dan format web. Di sini, target audiens sudah memiliki pemahaman tentang produk dan budaya organisasi menerbitkan komunikasi. Akibatnya, konten yang disajikan terhadap karyawan ' perspektif sehingga mereka merasa dilibatkan dalam perdebatan tentang arah dan kemajuan entitas. Publikasi seperti itu sering dapat mencakup lebih teknis Informasi.

Dyson komunikasi internal (kiri dan bawah)

Foto adalah menyebar dari majalah yang dibuat oleh staf Tiga belas bagi produsen produk rumah, Dyson. Setiap isu Majalah secara visual berbeda dan menyajikan yang inovatif, menarik dan pesan inspirasional untuk memperkuat budaya perusahaan dan sifat dari pendekatan untuk desain produk. Sebagai ini merupakan publikasi internal, itu alamat penonton yang sudah memahami produk perusahaan dan pesan. Namun, masih perlu terlibat untuk pesan untuk menjadi dikomunikasikan secara efektif.

Dasar-dasar Desain Grafis Menyampaikan pesan

Publik yang menghadap ke komunikasi Public-menghadap komunikasi adalah mereka ditargetkan pada masyarakat umum, yang mungkin tidak akrab dengan produk, jasa, atau budaya organisasi menerbitkan komunikasi. Komunikasi tersebut, oleh karena itu, sering harus menjelaskan aspek produk dalam rangka menciptakan kesadaran - bahkan jika ini berarti menyatakan sangat jelas. Seringkali, bahasa teknis perlu diencerkan ke dalam istilah yang lebih mudah diakses untuk audiens non-ahli.

National Maritime Museum

(Kanan)

Ini sederhana berbasis ikon sampul oleh Desain Mark, London hasil dalam menarik identitas untuk penerbitan departemen Nasional Maritime Museum. Malah menggunakan gambar tradisional dari ikon laut, yang individual merujuk ke laut digunakan, secara kolektif menciptakan sensasi dari gelombang pecah di pantai. Axeman Lullaby (kanan) Foto adalah poster dibuat Desain oleh 3 Deep kinerja perusahaan BalletLab bahwa fitur menangkap gambar monoton, yang menangkap esensi acara Lullaby Axeman. Styling gambar menunjukkan darah hujan rintik-rintik yang menggabungkan dengan tampilan takut terhadap karakter dalam gambar untuk menginformasikan kepada masyarakat tentang sifat acara. Penggunaan hitam daripada tinta merah mencegah gambar dari muncul terlalu mengerikan.

Kota Cahaya, Krems

(Kanan dan bawah)

Kota brosur Cahaya dirancang oleh Büro X untuk kota Krems menggunakan kuning sebagai warna banjir yang berdarah off Halaman tepi. Warna juga menyatu ke dalam beberapa fotografi.

Banjir warna

Penuh warna berdarah yang mengalir dari beberapa atau semua sisi bagian dicetak.

Dasar-dasar Desain Grafis Menyampaikan pesan

Laporan tahunan

Laporan Tahunan menyediakan sumber penting dari pekerjaan untuk desainer grafis. Mereka lebih dari sekedar tentang angka - mereka menyediakan sarana berharga komunikasi dan digunakan untuk menginformasikan para pembaca, pemegang saham dan staf organisasi arah dan aspirasi. Laporan tahunan sering dirancang dengan tema tertentu, atau bercerita tentang tujuan perusahaan.

Channel 4 (kiri dan bawah)

NB: Studio dirancang laporan ini untuk Channel 4. Ini termasuk menyebar eklektik yang menginformasikan orang tentang apa stasiun tidak. Informasi keuangan disajikan lebih bijaksana pada akhir publikasi dan itu dicetak di atas yang berbeda saham kertas. Laporan ini juga disertai dengan serangkaian poster.

Eklektik

Penggunaan bahan, gambar atau konten dari berbagai sumber yang berbeda atau gaya.

Selengkapnya...

Tutorial Membuat Web Sederhana

kali ini saya akan membahas Tutorial Membuat Web Sederhana mengunakan Adobe Photoshop dan Adobe Dreamweaver cs 5. perlu diketahui bahwa web yang akan kita buat kali ini tidak menggunakan tabel melainkan menggunakan css sebagai pengatur komponen.
Web Sederhana ini bertemakan lingkungan dengan satu hompage, 3 halaman artikel dan 1 halaman gallery dengan menggunakan template flash.

kita mulai Tutorial Membuat Sederhana ini denganmembuat desain tampilan web menggunakan Adobe Photoshop cs 5. berikut ini adalah contoh desain web yang akan kita gunakan.

buat slice setiap komponen. artinya kita akan memecah setiap komponen yang akan digunakan dengan menggunakan slice tool sehingga semua bagian terpisah seperti kompnen header dibawah ini.

 jika sudah di slice, langkah selanjutnya adalah menyimpan hasil slice tadi dengan cara klik file > save for web and devices.

simpan seluruh slice gambar di dalam folder images. maka langkah selanjutnya adalah mengedit tampilan web menggunakan Dreamweaver cs 5. silakan buka dreamweaver cs5.kemudian pilih file .css untuk menampilkan potongan gambar yang tadi.
berikut adalah css file yang saya gunakan untuk contoh web ini.

@charset "utf-8";
/* CSS Document */

body {
 background-image: url(images/w39.jpg);
 background-repeat: no-repeat inherit;
 background-attachment:fixed;
}
.header {
 width: 684px;
    margin: 0 auto;
    height:116px;
 background: url(images/home_page1.png) ;
}
.atas {
 width: 684px;
    margin: 0 auto;
    height: 27px;
 background : url(images/atas.gif) top right no-repeat;
 
}
.tengah {
 width: 684px;
    margin: 0 auto;
    max-height: auto;
 min-height: 426px;
 background: url(images/konten_10.png);

}
.bawah {
 width: 684px;
    margin: 0 auto;
    height: 19px;
 background: url(images/konten_11.png) top right no-repeat;
}
.footer {
 width: 683px;
    margin: 0 auto;
    height: 144px;
 background: url(images/footer.png);
}
.content{
    width: 683px auto;
    margin: 0 auto;
    height: 426px;
 background: url(images/konten_10.gif);
}
.container{
 padding : 10px;
 text-align: left;
}
.konten {
 background-image: url(images/home_page_09.gif);
}

    
    #menudrop{
    background-color: transparent;/* warna background utama , silakan ganti dengan value lain */
    padding:0;
    margin-top:1px;/* jarak luar atas, silakan ganti dengan value lain */
    margin-bottom:1px;/*jarak luar bawah , silakan ganti dengan value lain */
    margin-left: auto;/* jarak luar kiri , silakan ganti dengan value lain */
    margin-right: auto;/* jarak luar kanan , silakan ganti dengan value lain */
    overflow: hidden;
    font-family: Droid;/* werna background utama , silakan ganti dengan value lain */
 
    font-size:15px;/* ukuran font, silakan ganti dengan value lain */
    font-weight:bold;/* ketabalan font, silakan ganti dengan value lain */
    width:683px;/*lebar background belakang , silakan atur lebarnya */
    -moz-border-radius:5px;/* fungsi ini untuk membuat lengkungan selebar 5px, hanya untuk firefox, silakan ganti dengan value lain */
    text-transform:capitalize;
    }
   
    #menudrop a{
  text-decoration:none;
  }
    
    #menustyle{
  margin:0;
  padding:0;
  }
    
    #menustyle ul{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
 }
    
    #menustyle li{
  list-style:none;
        margin:0;
     padding:0;
  }
    
    #menustyle li a, #menustyle li a:link, #menustyle li a:visited{
 width: 88px ;
 height: 36px;
    background: url(images/home_page_04.gif) no-repeat;/* warna background link, silakan ganti dengan value lain */
    color: #FFF;/* warna text link, silakan ganti dengan value lain */
    display:block;
 text-align: center;
    padding-top: 8px;/*padding ini adalah jarak antara text dengan batas luar, silakan ganti dengan value lain */
    -moz-border-radius:4px;/* fungsi ini untuk membuat lengkungan selebar 4px, hanya untuk firefox, silakan ganti dengan value lain */
    }
    
    #menustyle li a:hover, #menustyle li a:active{
    background-color: transparent;/* warna background link ketika cursor melintas, silakan ganti dengan value lain */
    color:lime;/* warna text link ketika cursor melintas, silakan ganti dengan value lain */
    margin:0;
    -moz-border-radius:4px;
    }
    
    #menustyle li li a, #menustyle li li a:link, #menustyle li li a:visited{
  background-image:url(images/home_page_07.gif);
 width:420px;/* lebar link-link yang ngedrop, silakan ganti dengan value lain */
 height:36px;
    float:none;
    margin:0;
    font-size:18px;/* ukuran font yg ngedrop, silakan ganti dengan value lain */
    }
    
    #menustyle li{
  float:left;
  padding:0;
  }
  
    #menustyle li a.enclose, #menustyle li a.enclose:visited{
  border-top:1px solid white;
  }
  
    #menustyle li ul{z-index: 9999;
 position:absolute;
 left:-999em;
 height:auto;
 width:170px;
 margin:0;
 padding:0;
 }
 
    #menustyle li ul a{
  width: 140px;
  }
  
    #menustyle li ul ul{
  margin:-75px 0 0 171px;
  }
  
    #menustyle li:hover ul ul, #menustyle li:hover ul ul ul, #menustyle li.sfhover ul ul, #menustyle li.sfhover ul ul ul{
  left:-999em;
  }
  
    #menustyle li:hover ul, #menustyle li li:hover ul, #menustyle li li li:hover ul, #menustyle li.sfhover ul, #menustyle li li.sfhover ul,        #menustyle li li li.sfhover ul{
  left:auto;
  }
  
    #menustyle li:hover, #menustyle li.sfhover{
  position:static;
  }

simpan dengan nama style.css


kemudian buat file .html baru untuk homepage dan simpan dalam satu folder dengan script css dan folder images yang td.


untuk menghubungkan css dengan file html gunakan script berikut

<link rel="stylesheet" href="styles.css" type="text/css" media="all" />

berikut ini adalah contoh halaman web yang akan kita buat.

untuk background silakan gunakan gambar apa saja tetapi harus berukuran besar agar tidak terpotong ketika diimplementasikan ke dalam web browser.

untuk menu dropdown, bisa menggunakan unorderd list pada html dengan menggunakan css berikut.

   #menudrop{
    background-color: transparent;/* warna background utama , silakan ganti dengan value lain */
    padding:0;
    margin-top:1px;/* jarak luar atas, silakan ganti dengan value lain */
    margin-bottom:1px;/*jarak luar bawah , silakan ganti dengan value lain */
    margin-left: auto;/* jarak luar kiri , silakan ganti dengan value lain */
    margin-right: auto;/* jarak luar kanan , silakan ganti dengan value lain */
    overflow: hidden;
    font-family: Droid;/* jenis font yang digunakan, silakan ganti */
 
    font-size:15px;/* ukuran font, silakan ganti dengan value lain */
    font-weight:bold;/* ketabalan font, silakan ganti dengan value lain */
    width:683px;/*lebar background belakang , silakan atur lebarnya */
    -moz-border-radius:5px;/* fungsi ini untuk membuat lengkungan selebar 5px, hanya untuk firefox, silakan ganti dengan value lain */
    text-transform:capitalize;
    }
   
    #menudrop a{
  text-decoration:none;
  }
    
    #menustyle{
  margin:0;
  padding:0;
  }
    
    #menustyle ul{
    float:left;
    list-style:none;
    margin:0;
    padding:0;
 }
    
    #menustyle li{
  list-style:none;
        margin:0;
     padding:0;
  }
    
    #menustyle li a, #menustyle li a:link, #menustyle li a:visited{
 width: 88px ;
 height: 36px;
    background: url(images/home_page_04.gif) no-repeat;/* warna background link, silakan ganti dengan value lain */
    color: #FFF;/* warna text link, silakan ganti dengan value lain */
    display:block;
 text-align: center;
    padding-top: 8px;/*padding ini adalah jarak antara text dengan batas luar, silakan ganti dengan value lain */
    -moz-border-radius:4px;/* fungsi ini untuk membuat lengkungan selebar 4px, hanya untuk firefox, silakan ganti dengan value lain */
    }
    
    #menustyle li a:hover, #menustyle li a:active{
    background-color: transparent;/* warna background link ketika cursor melintas, silakan ganti dengan value lain */
    color:lime;/* warna text link ketika cursor melintas, silakan ganti dengan value lain */
    margin:0;
    -moz-border-radius:4px;
    }
    
    #menustyle li li a, #menustyle li li a:link, #menustyle li li a:visited{
  background-image:url(images/home_page_07.gif);
 width:420px;/* lebar link-link yang ngedrop, silakan ganti dengan value lain */
 height:36px;
    float:none;
    margin:0;
    font-size:18px;/* ukuran font yg ngedrop, silakan ganti dengan value lain */
    }
    
    #menustyle li{
  float:left;
  padding:0;
  }
  
    #menustyle li a.enclose, #menustyle li a.enclose:visited{
  border-top:1px solid white;
  }
  
    #menustyle li ul{z-index: 9999;
 position:absolute;
 left:-999em;
 height:auto;
 width:170px;
 margin:0;
 padding:0;
 }
 
    #menustyle li ul a{
  width: 140px;
  }
  
    #menustyle li ul ul{
  margin:-75px 0 0 171px;
  }
  
    #menustyle li:hover ul ul, #menustyle li:hover ul ul ul, #menustyle li.sfhover ul ul, #menustyle li.sfhover ul ul ul{
  left:-999em;
  }
  
    #menustyle li:hover ul, #menustyle li li:hover ul, #menustyle li li li:hover ul, #menustyle li.sfhover ul, #menustyle li li.sfhover ul,        #menustyle li li li.sfhover ul{
  left:auto;
  }
  
    #menustyle li:hover, #menustyle li.sfhover{
  position:static;
  }

berikut ini adalah isi html dari homepage.

<html>
<head>
<title>home_page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="styles.css" type="text/css" media="all" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (home_page.psd) -->


<div class="header">
</div>


<!--d-->

<!--d-->
<div>

   
    <div id='menudrop'>
    <ul id='menustyle'>
    <li><a href='file:///D:/tugas%20web/home_baru/home_baru.html'>home</a></li>
    <li><a href=''>pages</a>
    <ul>
    <li><a href='file:///D:/tugas%20web/home_baru/artikel-1.html'>12 Langkah Menghemat Energi</a></li>
    <li><a href='file:///D:/tugas%20web/home_baru/artikel-2.html'>4 Langkah Menghemat Plastik</a></li>
    <li><a href='file:///D:/tugas%20web/home_baru/artikel-3.html'>6 Upaya Pencegahan atas Pencemaran Lingkungan</a></li>
    </ul>
    <li><a href='file:///D:/tugas%20web/home_baru/gallery.html'>gallery</a> 
    <li><img src="images/home_page_07.gif" width="419" height="36">   
</div>
<!--d-->

<div class="atas"></div>
<div class="tengah"> 
<div class="container"> 
          <h1>SELAMAT DATANG </h1>
    <p>Selamat datang di web eco-save. web ini berisi artikel dan kumpulan gambar bertema "penyelamatan ligkungan". karena semakin hari lingkungan yang kita tempati,yaitu bumi, sedang mengalami Global Warming (Pemanasan Global), maka web ini berusaha menyajikan berbagai cara memperlambat atau bahkan mengurangi kerusakan bumi kita tercinta.
</p>

</div>
</div>
<div class="bawah">
</div>
<div class="footer">
</div>


<!-- End Save for Web Slices -->
</body>
</html>

tampilan homepage tersebut akan kita gunakan untuk page selanjutnya. buat file .html baru bernama artikel-1.html, kemuadian copy paste sourcecode di atas ke dalam sourcecode file artikel-1.html. file html ini berfungsi untuk page yang akan di isi artikel atau konten. isi konten diletakan antara code <div class="tengah">
<div class="container">
dan code
</div>
</div>

<div class="tengah">

<div class="container">

!!!!!!!!isi konten di sini!!!!!!!!

</div>

</div>

 
buat halaman artikel seperti di atas sebanyak page dengan menggunakan sourcecode yang sama. hanya isi artikelnya saja yang berbeda. berikut ini contoh artikel.

Selengkapnya...

WWW ( World Wide Web )

WWW atau World Wide Web. Sebuah kata yang sangat tindak asing di telinga kita. Terutama anda yang sering mondar -mandir di dunia maya. Jika ingin masuk ke suatu website pasti anda mengetik awalan tersebut. Misalnya anda ingin membuka akun facebook anda, di kotak alamat anda pasti mengetikkan www.facebook.com. tahukah anda sejak kapan penulisan www mulai dipakai di jagat web?.

Sejarah web

Sejarah Web bermula di European Laboratory for Particle Physics (lebih dikenal dengan nama CERN), di kota Geneva dekat perbatasan Perancis dan Swiss. CERN merupakan suatu organisasi yang didirikan oleh 18 negara di Eropa. Dibulan Maret 1989, Tim Berners dan peneliti lainnya dari CERN mengusulkan suatu protokol sistem distribusi informasi di Internet yang memungkinkan para anggotanya yang tersebar di seluruh dunia saling membagi informasi dan bahkan untuk menampilkan informasi tersebut dalam bentuk grafik.
Web Browser pertama dibuat dengan berbasiskan pada teks. Untuk menyatakan suatu link, dibuat sebarisan nomor yang mirip dengan suatu menu. Pemakai mengetikkan suatu nomor untuk melakukan navigasi di dalam Web. Kebanyakan software tersebut dibuat untuk komputer-komputer yang menggunakan Sistem Operasi UNIX, dan belum banyak yang bisa dilakukan oleh pemakai komputer saat itu yang telah menggunakan Windows. Tetapi semua ini berubah setelah munculnya browser Mosaic dari NCSA (National Center for Supercomputing Applications).
Di bulan Mei 1993, Marc Andreesen dan beberapa murid dari NCSA membuat Web browser untuk sistem X-Windows yang berbasiskan grafik dan yang mudah untuk digunakan. Dalam beberapa bulan saja, Mosaic telah menarik perhatian baik dari pemakai lama maupun pemakai baru di Internet. Kemudian NCSA mengembangkan versi-versi Mosaic lainnya untuk komputer berbasis UNIX, NeXT, Windows dan Macintosh.
Di bulan Mei 1993, Marc Andreesen dan beberapa murid dari NCSA membuat Web browser untuk sistem X-Windows yang berbasiskan grafik dan yang mudah untuk digunakan. Dalam beberapa bulan saja, Mosaic telah menarik perhatian baik dari pemakai lama maupun pemakai baru di Internet. Kemudian NCSA mengembangkan versi-versi Mosaic lainnya untuk komputer berbasis UNIX, NeXT, Windows dan Macintosh.
Pada tahun 1994, Marc Andreesen meninggalkan NCSA, dan kemudian bersama Jim Clark, salah satu pendiri dari Silicon Graphics, membuat Netscape versi pertama. Kehadiran Netscape ini menggantikan kepopuleran Mosaic sebagai Web browser dan bahkan sampai saat ini Netscape merupakan browser yang banyak digunakan setelah Internet Explorer dari Microsoft.
Pada tahun yang sama CERN dan MIT mendirikan suatu konsorsium yang dinamakan World WIde Web Consortium (W3C) yang bertugas untuk membangun standar bagi teknologi Web.
Pada awal perkembangannya, sewaktu browser masih berbasiskan teks hanya terdapat sekitar 50 website. Di akhir tahun 1995 jumlah ini telah berkembang mencapai sekitar 300.000 web site. Dan diperkirakan sekarang ini jumalh pemakai Web telah mencapat sekitar 30-an juta pemakai diseluruh dunia


Arsitektur web 

Dalam membuat web kita juga memerlukan rancangan atau arsitektur untuk melakukan pendekatan terhadap desain dan perencanaan situs web itu sediri. arsitektur web melibatkan teknis, estetika dan kriteria fungsional. seperti dalam arsitektur pada umumnya, fokus arsitektur web yaitu pada pengguna dan kebutuhan pengguna.

HTTP
HTTP Singkatan dari Hypertext Transfer Protocol, yang mana adalah suatu protokol yang digunakan oleh World Wide Web. HTTP mendefinisikan bagaimana suatu pesan bisa diformat dan dikirimkan dari server ke client. HTTP juga mengatur aksi-aksi apa saja yang harus dilakukan oleh web server dan juga web browser sebagai respon atas perintah-perintah yang ada pada protokol HTTP ini. Sebagai contoh, ketika Anda mengetikkan suatu alamat atau URL pada internet browser Anda, maka sebenarnya web browser akan mengirimkan perintah HTTP ke web server. Web server kemudian akan menerima perintah ini dan melakukan aktivitas sesuai dengan perintah yang diminta oleh web browser (misalnya akses ke database, file, e-mail dan lain sebagainya). Hasil aktivitas tadi akan dikirimkan kembali ke web browser untuk ditampilkan kepada pengguna.
HTTP juga mengatur aksi-aksi apa saja yang harus dilakukan oleh web server dan juga web browser sebagai respon atas perintah-perintah yang ada pada protokol HTTP ini. Sebagai contoh, ketika Anda mengetikkan suatu alamat atau URL pada internet browser Anda, maka sebenarnya web browser akan mengirimkan perintah HTTP ke web server.
Web server kemudian akan menerima perintah ini dan melakukan aktivitas sesuai dengan perintah yang diminta oleh web browser (misalnya akses ke database, file, e-mail dan lain sebagainya). Hasil aktivitas tadi akan dikirimkan kembali ke web browser untuk ditampilkan kepada pengguna.
HTML
HTML adalah singkatan dari Hyper Text Markup Language, HTML tidak tergolong kedalam sebuah bahasa pemrograman, HTML lebih dikenal sebagai bahasa markup yang terdiri dari serangkaian tag markup yang mampu menggambarkan sebuah halaman web.
Secara garis besar, terdapat 4 jenis elemen dari HTML:
structural. tanda yang menentukan level atau tingkatan dari sebuah teks akan memerintahkan browser untuk menampilkan sebagai teks tebal besar yang menunjukkan sebagai Heading 1
presentational. tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks tersebut. Tanda presentational saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan teks,
hypertext. tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain , Elemen widget yang membuat objek-objek lain seperti tombol button, list , dan garis horizontal .
Selain markup presentational , markup yang link tidak menentukan bagaimana tampilan dari sebuah teks. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan dan sebagai gantinya digunakan Cascading Style Sheets.
HTML Markup Tag
HTML Markup Tag biasa disebut tag HTML adalah kata kunci yang diapit oleh sudut kurung seperti , tag HTML biasanya berpasangan seperti dan , tag disebut tag awal/pembuka dan adalah tag akhir/penutup cirinya ditambahkan tanda garis miring.
Dokumen HTML - Halaman Web
Dokumen HTML berisi serangkaian tag HTML kemudian diterjemahkan oleh web browser (internet explorer, mozilla firefox, dll.) untuk selanjutnya ditampilkan dalam bentuk halaman web, artinya apabila dokumen HTML sudah dibuka oleh web browser tidak lagi tampil tag-tag htmlnya melainkan sudah sebagai halaman web

URL
Uniform Resource Locator Disingkat dengan URL. URL digunakan dengan software browser untuk menempatkan dan mengakses informasi di World Wide Web. URL terbagi menjadi beberapa bagian atau dikenal dengan istilah http:// domain/path/filename, atau disebut pula metode akses - lokasi komputer - lokasi file. Di antara bagian tersebut adalah:
• Bagian pertama URL dikenal sebagai protocol atau disebut pula http:// yang merupakan singkatan dari Hypertext Transfer Protokol.
• Bagian kedua dari URL dikenal sebagai nama domain, domain mewakili nama server yang sedang berhubungan dengan internet.
• Bagian ketiga dari URL disebut dengan directory path yang merupakan area khusus dimana item-item berada.
• Bagian keempat dari URL disebut nama file dokumen, ini menentukan file khusus yang sedang diakses. Biasanya adalah sebuah file HTML, tapi mungkin juga gambar, suara atau file lainnyaContoh dari URL:ftp://ftp.ee.umanitoba.ca/pub/indonesian/00-index.txt
Dalam contoh di atas, ditunjukkan bagaimana mendapatkan berkas {00-index.txt}, yaitu dengan menggunakan protokol FTP, di mesin yang bernama {ftp.ee.umanitoba.ca}, dan berkas berada di direktori {pub/indonesian}.Secara umum, URL memiliki keterangan sebagai berikut:protokol://nama-mesin[:nomor-port]/direktori/menuju/namafile
XML
XML untuk saat ini bukan merupakan pengganti HTML. Masing-masing dikembangkan untuk tujuan yang berbeda. Kalau HTML digunakan untuk menampilkan informasi dan berfokus pada bagaimana informasi terlihat, XML mendeskripsikan susunan informasi dan berfokus pada informasi itu sendiri. XML terutama dibutuhkan untuk menyusun dan menyajikan informasi dengan format yang tidak mengandung format standard layaknya heading, paragraph, table dan lain sebagainya. Sebagai contoh apa bila kita ingin menyimpan dan menyajikan informasi notasi musik pada lagu “Indonesia raya”, kita bisa menyimpannya dengan xml
Kemudian dengan bantuan software lain midi generator kita bisa mendengarkan musiknya atau kita bisa membuat softaware sendiri yang menampilkan informasi ini dalam bentuk not balok. Sama dengan HTML, File XML berbentuk teks sehingga bila diperlukan kita bisa membacanya tanpa memerlukan bantuan software khusus. Hal ini memudahkan pengembang aplikasi yang menggunakan XML untuk mendebug programnya. XML lebih fleksible dibanding HTML dalam hal kemampuannya menyimpan informasi dan data. Pada XML kita bisa menyimpan data baik dalam atribut maupun sebagai isi elemen yang dletakkan diantara tag pembuka dan tag penutup. Kelebihan lain yang dimiliki XML adalah bahwa informasi bisa di pertukarkan dari satu system ke system lain yang berbeda platform. Misalnya dari Windows ke Unix, atau dari PC ke Machintosh bahkan dari internet ke handphone dengan teknologi WAP.

XSLT
XSLT adalah kependekan dari eXtensible StyleSheet Language:Transformation, adalah bagian dari XSL yang dikembangkan sebelumnya. XSL adalah Stylesheet yang khusus dikembangkan sebagai komplemen XML, untuk merubah informasi pada XML ke dalam bentuk lain agar bisa ditampilkan di layar, dicetak di kertas atau didengarkan telinga. Pada dasarnya proses ini di bagi menjadi dua bagian proses yakni pertama Transformasi Struktural yang meliputi pengumpulan, pengelompokan dan pengurutan data maupun penyusunan ulang, penambahan dan penghapusan tag dan atribut, dan yang kedua adalah proses merubah format menjadi pixel dilayar, nohtah tinta di kertas atau nada di speaker. Proses yang pertama itulah yang kemudian disebut XSLT, sedangkan yang kedua biasa disebut XSLFO (eXtensible Stylesheet Language:Formatting Object).
Hasil Keluaran XSLT bisa berupa HTML, Text file atau XML dengan format yang baru. Sebenarnya untuk menampilkan dokumen XML agar lebih menarik dilihat di browser bisa dilakukan oleh Cascade StyleSheet. CSS yang sering digunakan untuk memformat HTML bisa juga dipakai untuk XML. Akan tetapi CSS tidak mampu melakukan tugas tugas yang rumit seperti memformat angka desimal, menjumlah, menghitung rata-rata, menampilkan gambar, dan lain-lain. Dan untuk melakukan tugas-tugas itulah kita memerlukan XSLT

XSLT Processor
XSLT Processor atau yang biasa disebut Parser adalah software bantu yang tugasnya menerapkan perintah-perintah dalam XSLT pada dokumen sumber XML, dan menghasilkan dokumen keluaran baik berupa HTML, Text file ataupun XML.
JavaScript
JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk di browser atau halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu, dan lain lain.
Kelebihan JavaScript
JavaScript bekerja pada sisi browser. maksudnya begini : untuk menampilkan halaman web, user menuliskan alamat web di address bar url. setelah itu, browser “mengambil” file html ( dengan file jJvaScript yang melekat padanya jika memang ada ) ke server yang beralamat di URL yang diketikan oleh user. Selesai file diambil, file ditampilkan pada browser. Nah, setelah file JavaScript berada pada browser, barulah script JavaScript tersebut bekerja.
Efek dari Javascript yang bekerja pada sisi browser ini, Javascript dapat merespon perintah user dengan cepat, dan membuat halaman web menjadi lebih responsif. JavaScript melakukan apa yang tidak bisa dilakukan oleh HTML, PHP, dan CSS : menangani hal – hal yang membutuhkan respons cepat terhadap aksi dari user.
ajax
Implementasi terpopuler saat ini dari pemrograman JavaScript adalah teknik AJAX. (Asynchronous JavaScript and XMLHTTP ). teknik ini sering digunakan oleh aplikasi berbasis web seperti Gmail, Google Reader, dan lain lain. Teknik yang membuat pertukaran data antara server dan browser terjadi di belakang layar sehingga interaksi antara user dan aplikasi web semakin responsif. Post tersendiri untuk membahas hal ini akan kita siapkan.
Asynchronous Javascript And XML (AJAX) suatu teknik pemrograman baru dalam dunia web yang sedang digemari, karena akses data ke server yang dikirim melalui client via web dapat lebih cepat, karena AJAX tidak perlu melakukan proses loading. AJAX juga dapat diintegrasikan dengan server side programming seperti PHP, ASP, JSP, dll.

Sumber :

http://www.total.or.id
http://www.ilmukomputer.com
http://gugling.com/pengertian-javascript-dan-sejarahnya.html

Selengkapnya...

Cloud Computing ( Komputasi Awan)

Cloud Computing atau Komputasi Awan adalah sebuah teknologi sistem informasi yang memudahkan client mengakses data secara mobile di mana pun. Komputasi awan dapat menyimpan data, aplikasi, dan lainnya sehingga client tidak perlu menyimpan data ini secara permanen karena bisa di akses kapan saja

Namun sangat disayangkan karena di tanah air belum begitu pesat pertumbuhannya. beberapa faktor menjadi alasan mengapa perusahaan atau organisasi di Indonesia belum percaya kepada sistem ini.

Yang pertama adalah keamanan dari data. Suatu organisasi tidak bisa begitu saja mempercayakan data-data penting yang mereka miliki kepada suatu Cloud Provider. Tetapi hampir setiap penyedia layanan ini menawarkan fasilitas Private Cloud, sehingga client tidak perlu khawatir data yang mereka miliki dapat diakses orang lain.

Kedua adalah sumber daya manusia. staff IT di perusahaan haruslah diberikan pengajaran tentang komputasi awan, supaya mereka dapat mengerti cara pengunaan sistem ini dan dapat menentukan biaya yang coco untuk sebuah perusahaan.

Sebenarnya kita sudah merasakan sistem komputasi awan sejak lama. sebut saja email, email menggunakan sistem yang sama dengan cloud. pengguna email tidak perlu menyimpan email yang masuk ke alamatnya di dalam devicenya sendiri. tetapi ada server yang memiliki storage untuk menyimpan email tersebut dan dapat dibuka kapan saja. perbedaannya dengan cloud adalah penggunaannya yang lebih kompleks seperti penyimpanan database, content dll.

Provider komputasi awan yang sudah banyak dipakai di dunia adalah iCloud milik Apple, Cloud Ubuntu, Cloud HP, dll. 

sumber : dari berbagai sumber.

Selengkapnya...

SQL Injection

SQL Injection merupakan salah satu teknik hackinng edngan cara memanipulasi syntax SQL (Structured Query Language). pengelolaan database dengan SQL dilakukan dengan mengirimkan perintah-perintah (queries) yang terstruktur dengan bahasa yang tersedia. Teknik SQL Injection digunakan oleh hacker untuk memasukkan perintah-perintah yang digunakan dalam database lewat URL.

Penggunaan SQL sebagai salah satu database management system yang populer menjadikan SQL Injection sebagai salah satu masalah keamanan yang cukup berbahaya bila tidak ditangani dengan serius. Apalagi penggunaan databse dengan basis SQL, seperti MySQL, Microsoft SQL Server atau PostgreSQL cukup populer dibanding dengan database lainnya.

SQL Injection umumnya terjadi karena ketidak telitian programmer dalam membuat script yang akan dijadikan query SQL. Dan tentu saja hal ini bukan merupakan sesuatu yang mudah dihilangkan karena setiap programmer memiliki tingkat ketelitian yang berbeda saat membuat program. Hacker bisa melakukan serangan dengan cara memasukkan perintah seperti tanda petik ('), minus (-) atau kode lainnya

Cara Menghindari SQL Injection

Sebelum mengupload situs, uji coba dulu keamanannya menggunakan tools seperti N-Stealth Keamanan Scanner. Acunetix Ltd's Web Vulnerability Scanner dan SPI Dynamic WebInspect. untuk versi gratis, bisa menggunakan Nikto. Jika memang terdapat bug, silakan cari patch bug yang cocok di forum-forum keamanan web.

sunber : Kiddo.2010.HACKING WEBSITE.Jakarta : Mediakita.

Selengkapnya...

konfigurasi WIFI Ad Hoc

Jaringan Ad Hoc terbentuk bila antara terminal (Notebook, Desktop atau PDA) yang telah dilengkapi Wireless LAN Card  saling tersambung tanpa melalui Access Point . Contoh dari jaringan Ad Hoc, adalah jaringan yang memiliki konfigurasi peer-to peer . untuk sebuah kantor yang tidak terlalu besar dan hanya terdiri atas satu lantai, maka konfigurasi peer-to-peer akan cukup memadai. peer-to-peer wireless LAN hanya mensyaratkan wireless interface di dalam setiap device yang terhubung ke jaringan.
Dengan konfigurasi peer-to-peer ini, sangat cocok digunakan dalam suatu pertemuan  secara temporer. Jadi jika sewaktu-waktu kita memerlukan adanya jaringan, dan hanya digunakan pada saat itu saja, kita tidak perlu repot-repot mengurusi kabel yang akan menghubungkan jaringan kita tersebut, dan membongkarnya kembali ketika kita sudah tidak memerlukannya lagi. cukup gunakan portabel komputer anda masing-masingdengan wireless interface di dalamnya, maka kita sudah saling terhubung.

Ada satu software yang akan memudahkan anda mengkonfigurasi wireless Ad Hoc pada laptop anda. software ini bernama Connectify . silakan klik link-nya dan download software-nya.

(klik SKIP AD di pojok kiri atas)

sumber : Hantoro, Gunadi Dwi. 2009. WIFI (Wireless LAN). Bandung : Informatika Bandung.

Selengkapnya...

file sharing linux menggunakan samba

            Agar komputer Linux anda bisa berbagi dengan komputer bersistem operasi Windows, anda harus memiliki Samba di komputer anda. Dengan begini. Anda dapat mengirim, menerima, dan berbagi file atau folder ke komputer lain yang menggunakan sistem operasi windows. Samba trsedia di Ubuntu software center, anda bisa mendownloadnya lalu mengistalnya dikomputer.

1.      Klik kanan pada folder yang akan anda sharing, lalu pilih menu ‘sharing  options’. Beri tanda cek di bagian ‘share name’ di isi dengan nama yang akan muncul pada folder yang dishare,yang biasanya disamakan dengan nama folder semula tapi bisa juga dibedakan.

2.      Comment diisi dengan komentar (bisa apa saja atau bisa dkosongkan). Beri tanda centang pada ketentuan-ketentuan yang dianggap sesuai ‘allow to others to create and delete files in this folder’, dan ‘Guest acces’. Klik share.

3.      Perhatikan folder ‘bukuu’ yang sudah dishare, akan muncul ikon kecil berbentuk tanda panah ke kana dan ke kiri, itu menandakan bahwa folder tersebut sudah bisa diakses oleh pengguna lain. Untuk mengecek hasil sharing pada Ubuntu, buka Nautilus.

4.      Pada side panel sebelah kiri (klik F9 untuk membuka side panel), klik ikon ‘network’, maka hasil sharing akan tampak. Anda juga bisa mengeklik ikon di kiri atas pada nautilus, pada ‘location’ketikkan untuk melihat seluruh sharing pada local network.

s sumber : Susrini, Ni Ketut. 2010. Linux : Untuk Pemula. Jakarta: PT. Grasindo.

Selengkapnya...