Selasa, 15 Oktober 2013

CSS Style

Style pada CSS memiliki struktur sebagai berikut
Selector  digunak an  untuk  menentukan  pada  elemen  ap a  style  tersebut  diterapkan.
Selector  dapat  berupa  n ama  id  elemen  atau  nama  class.  Bagian  deklar asi  menerangkan
style  yang  akan  dibuat.  Bagian  ini  terdiri  dari  properti  dan  value.  Properti  dapat  diisi
dengan jenis  warn a, uku ran,  perataan  mar gin dll,  sedangkan  value  diisi dengan nilai dari
propertinya,  misalnya  red  untuk  warna  dll.  Setiap  akhir  penulisan  p roperti  dan  value
harus  diakhiri  dengan  tanda  titik  koma  (semicolon).  Tanda  ini  juga  digunakan  sebagai
pemisah antar satu properti dengan properti lain.
Apabila  Anda  lupa  memberikan  tanda  titik  koma,  maka  style  terseb ut  tidak  akan
dijalankan oleh browser.
Mungkin Anda bertanya,  bagaimana jika kita akan membuat  style untuk beberapa elemen
yang b erbeda  namun  stylenya  sama? Misalkan kita akan membuat style  untuk elemen h1,
h2, h3 namun memiliki style yang sama. Berikut ini adalah sintaksnya:
h1, h2, h3 { properti1 : value1;
properti2 : value2;
properti3 : value3;
.
.
.
}
4
Struktur Style


CSS Tutorial
rosihanari.net
Mengatur Style List
Dengan  CSS,  Anda  dapat  pula  mengatur  style  suatu  list  seperti  mengubah  marker
maupun indentasinya, background dll.
Sebagai contoh, perhatikan code list berikut ini:
<h3>Menu Navigasi</h3>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</div>
List  di  atas  bertipe  unordered  list  dan  secara  default  akan  memiliki  tampilan  sebagai
berikut:
Anda dapat men gub ah style marker setiap elemen list dengan menggunakan properti
berikut ini:
list-style-type: marker
67
Mengatur Style List


CSS Tutorial
rosihanari.net
dengan
dapat  d iganti  dengan
,
,
,
(1,  2,  3,  ...),
marker
disc
circle
square
decimal
(A,  B,  C,  ...),
(a,  b,  c,  ...),
(I,  II,  III,  IV,  ...),
upper-alpha
lower-alpha
upper-roman
atau
(i, ii, iii, iv, ...)
lower-roman
Sebagai contoh, kita akan mengubah markernya dengan circle.
ul {
list-style-type: circle;
}
dan hasilnya adalah sebagai b erikut
Sedangkan untuk marker bertipe square, style adalah
ul {
list-style-type: square;
}
dengan hasil yang diperoleh adalah sebagai berikut
68
Mengatur Style List

Anda  mun gkin  bosan  dengan  model  marker  yang  itu-itu  saja.  Marker  dapat  diganti
dengan image yang kita inginkan. Sebaiknya gunakan image  berformat gif dan berukuran
kecil.
Berikut ini propertinya:
list-style-image: url(image.gif)
Sebagai contoh, berikut ini style yang ak an menggunakan image b ernama folder.gif yang
ada di folder img.
ul {
list-style-image: url(img/folder.gif)
}
dan hasilnya adalah
69
Mengatur Style List

CSS Tutorial
rosihanari.net
Suatu list dapat digunakan untuk menu navigasi. Berikut ini contoh tampilannya:
Meskipun secara sekilas mirip dengan penggunaan tabel, namun seben arnya tampilan
menu di atas dibuat dengan list.
Berikut ini stylenya:
ul {
list-style-type: none;  /* tidak menampilkan marker */
padding: 2px;
border: 1px solid black;
}
li {
padding: 2px;
margin-bottom: 1px;
background: red;
border: 1px solid black;
font-family: arial;
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
}
70
Mengatur Style List

CSS Tutorial
rosihanari.net
Style Pada Link
CSS juga dapat digunakan untuk mengatur style link. Berikut ini beberapa jenis selector
yang terkait dengan aktifitas link.
a:hover {    /* style yang muncul apabila link didekati kursor */
...
}
a:visited {       /* style yang muncul pada link yang pernah diklik */
...
}
Sebagai  contoh,  kita  akan  memodifikasi  menu  navigasi  dari  contoh  bab  sebelumnya
dengan menambahkan link
Berikut ini code dasarn ya
<h3>Menu Navigasi</h3>
<ul>
<li><a href="menu1.htm">Menu 1</a></li>
<li><a href="menu2.htm">Menu 2</a></li>
<li><a href="menu3.htm">Menu 3</a></li>
<li><a href="menu4.htm">Menu 4</a></li>
<li><a href="menu5.htm">Menu 5</a></li>
<li><a href="menu6.htm">Menu 6</a></li>
</ul>

Sedangkan style yang telah kita buat sebelumnya adalah
ul {
list-style-type: none;  /* tidak menampilkan marker */
padding: 2px;
border: 1px solid black;
}
li {
padding: 2px;
margin-bottom: 1px;
background: red;
border: 1px solid black;
font-family: arial;
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
}
Secara default, tampilan dari code di atas adalah sebagai berikut
71
Style Pada Link

CSS Tutorial
rosihanari.net

Sebuah  tampilan yan g  kurang menarik karena  bukan kombinasi  warna  yang bagus  antara
biru  dan  merah.  Secara  default,  warna  link  adalah  biru.  Namun  kita  dapat  mengubah
warnanya dengan yang lain. Berikut ini style untuk memberi warna putih pada link.
a {
color: white;
}
72
Style Pada Link

CSS Tutorial
rosihanari.net
Kita  pun  dapat  bermain-main  sedikit  dengan  animasi  link  dengan  CSS.  Animasi  yang
dimaksud  yaitu  perubahan  warna  link  ketika  kursor  didekatkan  pada  link  tersebut.
Misalkan kita  ingin  memberi warna  kuning  ketika  kursor didekatkan link,  maka  stylenya
adalah
a:hover {
color: yellow;
}
Adapun  efek  dari  penggunaan  hover  tampak  pada  gambar  berikut  ini.  Namun  sayang,
gambar kursorn ya gak kena screen shot.
Link-link  yang  telah  diklik  biasanya  akan  berubah  warna,  dengan  def aultnya  adalah
ungu.  Untuk  mengubah  warna  link  yang  telah  dikunjungi  tersebut,  Anda  dapat
menggunakan selector a:visited
Berikut ini contohnya:
a:visited {
color: black;
}
73
Style Pada Link

CSS Tutorial
rosihanari.net

Pada  gambar  di  atas,  dua  link  pertama  (menu  1  dan  2)  adalah  link  yang  pernah  diklik,
ditunjukkan dengan warna hitam.
74
Style Pada Link

Senin, 14 Januari 2013

SEJARAH DESAIN GRAFIS


Ilmu desain grafis belum begitu lama ada, Istilah graphic design yang berarti Desain Grafis pertama kali dikemukakan oleh William Addison Dwiggins pada tahun 1922, sebenarnya sejak zaman prasejarah sudah ada aktivitas manusia untuk membuat seni yang seperti desain grafis, beberapa diantaranya adalah di Gua Lascaux, Kolom Trajan Roma, Manuskrip abad pertengahan, dan Neon Ginza. Dalam sejarah yang panjang dan seiring perkembangan komunikasi visual di abad 20 dan 21, Banyak terjadi kesaaman pada seni periklanan, desain grafis, dan seni rupa.
Selama Dinasti Tang (618-907) antara abad ke-7 dan 9, kayu dipotong sebagai cetakan untuk mencetak pola pada tekstil dan kemudian untuk mencetak teks agama Budha. Sebuah kitab agama Buddha yang dicetak pada tahun 868 adalah buku hasil cetakan pertama di dunia. Sejak abad ke-11, buku yang lebih tebal diproduksi menggunakan pencetakan mekanik, hal ini membuat buku banyak tersedia selama dinasti Song (960-1279). Pada tahun 1450, mesin cetak Johann Gutenberg menjadikan buku tersedia di Eropa. Desain buku Aldus Manutius menjadi dasar desain buku di percetakan Negara-negara barat. Masa ini disebut sebagai Era Humanis atau Era Lama.
Pada akhir abad ke 19, di Inggris, muncul pergerakan yang memisahkan desain grafis dari seni rupa.
Pada tahun , Henry Cole menjadi salah seorang yang paling berpengaruh dalam pendidikan desain di Inggris, ia meyakinkan pemerintah tentang pentingnya desain dalam sebuah jurnal yang berjudul Journal of Design and Manufactures. Dia menyelenggarakan The Great Exhibition sebagai perayaan atas munculnya teknologi industri modern dan desain bergaya Victoria.
Dari tahun 1891 sampai 1896, Percetakan William Morris Kelmscott mempublikasikan buku karya desain grafis yang dibuat oleh gerakan Arts and Crafts , dan membuat buku dengan desain yang lebih bagus dan elegan untuk dijual kepada orang-orang kaya. Morris membuktikan adanya potensi pasar untuk produk-produk desain grafis. Morris juga mempelopori pemisahan desain grafis dari seni rupa. Karya –karya Morris dan karya dari pergerakan Private Press secara langsung mempengaruhi Art Nouveau, dan secara tidak langsung mempengaruhi perkembangan desain grafis pada awal abad ke 20.
Kata Desain Grafis pertama kali digunakan pada tahun 1922 di sebuah esai berjudul New Kind of Printing Calls for New Design yang ditulis oleh William Addison Dwiggins, seorang desainer buku Amerika.
Raffe's Graphic Design, yang diterbitkan pada tahun 1927, dianggap sebagai buku pertama yang menggunakan istilah Desain Grafis pada judulnya
The signage in the London Underground adalah contoh desain klasik pada abad modern yang menggunakan jenis huruf yang dirancang oleh Edward Johnston pada tahun 1916.
Pada tahun 1920, Aliran konstuktivisme di Uni Soviet melihat seni yang berorientasi individu tidak ada gunanya bagi Rusia dan membuat sesuatu yang dapat diterapkan di dunia nyata. Mereka mendesain bangunan, perangkat teater, poster, kain, pakaian, perabot, logo, menu, dll.
Jan Tschichold merumuskan prinsip-prinsip dasar tipografi modern pada tahun 1928 dalam bukunya yang berjudul New Typography. Tschichold, Bauhaus,Herbert Bayer and Laszlo Moholy-Nagy, and El Lissitzky adalah tipografer yang berpengaruh besar dalam ilmu desain grafis yang kita kenal sekarang ini. Mereka mempelopori teknik produksi yang digunakan sepanjang abad ke 20. Pada tahun-tahun berikutnya desain grafis mendapat banyak pengakuan dan mulai banyak diterapkan. Pasca Perang Dunia II, kebutuhan akan desain grafis meningkat pesat, terutama untuk periklanan dan kemasan produk. Perpindahan Sekolah Bauhaus dari Jerman ke Chicago pada tahun 1937 membawa pengaruh besar pada desain di Amerika. Nama- nama yang terkenal diantaranya Adrian Frutiger(desainer jenis huruf Univers dan Frutiger),
 Paul Rand(yang dari akhir 1930-an sampai kematiannya pada tahun 1996 menggunakan prinsip Bauhaus dan menerapkannya padaiklan dan desain logo.
Perkembangan industi desain grafis tumbuh seiring dengan perkembangan konsumerisme.
 Hal ini menimbulkan kritik dari berbagai komunitas desain yang tertuang dalam First Things First manifesto yang pertama kali diterbitkan pada tahun 1964 dan diterbitkan kembali pada tahun 1999 di majalah Émigré. Konsumerisme terus tumbuh, sehingga terus memacu pertumbuhan ilmu desain grafis. Hal ini menarik para praktisi desain grafis, beberapa diantaranya adalah : Rudy VanderLans, Erik Spiekermann, Ellen Lupton and Rick Poynor.

Rabu, 28 November 2012

Graphic Design Basic ( Komunikasi)

Perancang harus berurusan dengan pertukaraninformasi, komunikasi. Dia harus di bawah-berdiri fungsi mereka, kode dan languag-es. Hanya kemudian akan ia dapat menentukan desaintujuan.KomunikasiSebuah skema yang disederhanakan (visual) komunikasiterlihat berikut:Pemancar (desainer) berkomunikasidengan receiver (penampil) dengan mengirimkan mes-bijak dengan bantuan bahasa (di sini: pictori-al bahasa dan bahasa tertulis). Untuk tujuan ituia menggunakan kode untuk mengirimkan pesannya yang efektif-ly. Sebuah gambar, misalnya, menunjukkan laut,matahari dan pohon-pohon palem, tidak hanya gambar daripantai, tapi mengarah penonton untuk lebih asosiasi-tions dan bisa berdiri untuk pemulihan, relaksasi,kehangatan, liburan dllKartografer menggunakan kode dengan simbol sebagaibaik.Simbol ✉tidak hanya singkatan surat, namunjuga untuk kantor posSimboltidak hanya berarti beberapa pohon dan hutan hujan, tetapi juga daerah tropis, lembab-panas terik iklim, flora dan fauna tertentu dll

Kode 
Kode mengkodekan pesan. Penerima dapatuntuk memahami isi hanya dengan 
pengetahuan tentang kode (Contoh: legenda peta). 
Setiap simbol memiliki arti tertentu penerimaharus tahu.Bahasa lisan adalah kode juga: 
Seseorangmungkin misalnya memahami Jerman cukup baik, 
Perancis kurang baik dan Finlandia tidak sama sekali. 
Ini mungkin terjadi tentu saja bahwa dua atau 
lebih berarti-temuan yang ada untuk satu simbol.Dalam peta, misalnya, 
+ simbol dapat berdiri untuk 
gereja, kapel, kuburan atau batu.Menggelengkan kepala kami juga dikodifikasikan: 
itu berarti Tidak untukkami,
di Yunani itu berarti Ya.BahasaPada awal sejarah manusia orang 
di bawah-berdiri satu sama lain melalui
ekspresi wajah dangerakan atau suara.Informasi sebagai penemuan, 
suasana hati, keinginan ataupesanan bisa
dikomunikasikan sehinggaKarena tanda-tanda zaman batu linguistik dicatat 
permanen dengan ukiran mereka di kayu ataumelukis mereka di dinding batu.
Tanda-tanda yangdiambil dari alam.Pada abad ke 5 sebelum 
masehi skema tanda bergambartelah dirangkai bersama-sama untuk pertama kalinya,
 memungkinkan kita untuk memvisualisasikan kereta pemikiran danprogram acara. 
Sekarang bahasa dapat dikembangkan sesuai 
denganbudaya ekspresi dan kebutuhan sosial.Sign-seperti gambar digabungkan untuk
 membentuk tandabahasa (misalnya simbol pada peta).Surat, yang menjadi simbol juga, 
 membentuk kata-kata dan akhirnya kalimat: tertulisbahasa.Gambar seperti foto, ilustrasi 
danlukisan memiliki bahasa bergambar.Selain itu bahasa lanjut eksis sebagai tanda lan-gauge, 
notasi braille, musik, dll.Tujuan Komunikasi 

Perancang harus tahu persis siapa diaingin mengatasi dan 

apa yang dia ingin menyampaikan. 
Dia harus menanggapi penerima, persepsinyadan nya sekitarnya.  
Dia memiliki desain menyisirkemungkinan alat yang sesuai.  
Dia harus menggunakan-adequate metode, bahasa dan kode. 
Seorang desainer harus diberkahi dengan berikutpribadi kondisi:
 
  • Sensibility dan reseptif,
  • kelincahan dan kreativitas,
  • kemampuan untuk abstraksi dan analisis,
  • kemampuan untuk sintesis dan
  • kemampuan organisasi estetis.