Menambahkan Fitur Jam dan Kalender

Fitur-fitur ini dapat diperoleh secara gratis tanpa mengeluarkan biaya apapun. Seperti kita tahu ada banyak website-website yang menyediakan fitur-fitur gratis untuk memperindah tampilan blog ataupun web kita.
Untuk membuatnya ikuti langkah berikut :
1. Silahkan kunjungi situs http://www.clocklink.com

2. Jika sudah berada pada situs tersebut, silahkan klik tulisan Want a clock on your Website ?

3. Silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal, Animation, dll

4. Jika di rasa sudah menemukan model jam yang anda sukai, klik tulisan View HTML tag yang berada di bawah jam yang anda sukai tadi

5. Klik tombol yang bertuliskan Accept.

6. Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk indonesia bagian barat pilih GMT +7:00

7. Set ukuran jam yang anda sukai di samping tulisan size

8. Copy kode HTML yang di berikan pada notepad

9. Paste kode HTML yang di copy tadi pada tempat yang anda inginkan

10. Selesai




Untuk memasang kalender kita dapat mengakses http://www.free-blog-content.com.. Situs ini menawarkan download gratis dan kita bisa mendownload kalender yang kita inginkan. Untuk aplikasinya ikuti langkah berikut :

1. Sign in di blogger dengan id kita.

2. Klik menu layout

3. Klik menu Elemen Halaman

4. Klik tulisan Tambahkan sebuah elemen halaman

5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript

6 .Copy kode yang tadi telah ada di notepad lalu paste pada kolom yang di sediakan

7. Klik tombol SIMPAN PERUBAHAN

8. Pindahkan elemen yang baru di buat pada tempat yang sobat inginkan, lalu klik tombol SIMPAN

9. Selesai.

Membuat Background dengan Image

Background sebuah blog ternyata tidak hanya warna saja, tetapi dapat diubah dengan menggunakan image seperti di blog saya ini.
Untuk ukuran gambar, kita tidak perlu membuatnya dalam bentuk yang sangat besar, karena walaupun ukuran asli dari image adalah kecil, nanti akan di tampilkan dalam jumlah yang sangat banyak hingga memenuhi layar monitor.

Alamat gambar yang saya gunakan dalam blog ini adalah

http://amen24.googlepages.com/pattern_096.gif

Untuk membuatnya ini lakukan langkah berikut.
1.Klik kotak kecil di samping tulisan Expand Template Widget dan tunggu sampai proses selesai.

2.Tambahkan kode berikut pada style sheet css : (yang warna hijau adalah kode yang harus di tambahkan)
body {
background:$bgcolor url ('http://amen24.googlepages.com/pattern_096.gif');
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Footer

Sekarang saya akan membagikan bagaimana cara membuat footer seperti di blog saya ini. Sebenarnya footer dapat dibagi menjadi beberapa kolom terserah keinginan kita. Di sini saya menggunakan kode footer 2 kolom untuk memberi tampilan "Add Widget" di elemen halaman. Isi dan tampilan dari footer dapat diubah sesuai dengan keinginan. Berikut adalah langkah-langkahnya.

#footer-column-divide {<br /> clear:both;<br /> }<br /> .footer-column {<br /> padding: 10px;<br /> }<br />

Copy paste kode disamping pada kode CSS di samping sebelum ]]></b:skin> di kode template.

2.Jika sudah, cari kode seperti di bawah ini:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

<div id='footer-column-divide'><br /> <br /> <div id='footer1' style='width: 50%; float:left;<br /> margin:0; text-align:left;'><br /> <b:section class='footer-column' id='col1'<br /> preferred='yes' style='float:left;'/><br /> </div><br /> <br /> <div id='footer2' style='width: 50%; float: left;<br /> margin:0; text-align: left;'><br /> <b:section class='footer-column' id='col2'<br /> preferred='yes' style='float:left;'/><br /> </div><br /> <div style='clear:both;'/><br /> </div><br />

Ganti kode <b:section class='footer' id='footer'/> dengan kode disamping.

<div style='clear:both;'/><br /> <p><hr align='center' color='#333333' width='95%'/></p><br /> <br /> <div id='footer-bottom' style='text-align: center; padding:10px;'><br /> <b:section class='footer' id='col-bottom' preferred='yes'><br /> </b:section><br /> </div><br />

Sebagai tambahan jika ingin mempertahankan footer aslinya, maka tambahkan kode dibawah ini diatas kode <div style='clear:both;'/>.

Drop Down Menu 2 Level

Untuk membuat menu drop down seperti di blog saya, saya menggunakan kode HTML dan kode CSS agar tampilan drop down menunya menjadi menarik. Untuk membuatnya drop down seperti ini silahkan ikuti langkah-langkah dibawah ini (khusus untuk template minima yang baru) :

<!-- Dropdown menu Start --> <br /> <br /> <div id="menu"> <br /> <br /> <ul class="level1"> <br /> <br /> <li class="level1-li"><a class="level1-a" href="http://vaniaangelina525060003.blogspot.com/">Home</a></li> <br /> <br /> <li class="level1-li"><a class="level1-a fly" href="#url">Contact Me<!--[if gte IE 7]><!--></a><!--<![endif]--> <br /> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br /> <br /> <ul class="level2"> <br /> <br /> <li><a href="https://login.yahoo.com/config/login_verify2?&.src=ym">Email</a></li> <br /> <br /> </ul> <br /> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <br /> <br /> <li class="level1-li"><a class="level1-a fly" href="#url">FAQ'S<!--[if gte IE 7]><!--></a><!--<![endif]--> <br /> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br /> <br /> <ul class="level2"> <br /> <br /> <li><a class="fly" href="#url">DROP DOWN MENU<!--[if gte IE 7]><!--></a><!--<![endif]--> <br /> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br /> <br /> <ul class="level3"> <br /> <br /> <li><a href="http://kolom-tutorial.blogspot.com/2007/06/menu-dropdown-dengan-javascript.html">JAVA</a></li> <br /> <br /> <li><a href="http://bloggersentral.blogspot.com/2009/10/installing-multi-level-css-dropdown.html">CSS</a></li> <br /> <br /> </ul><br /> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <br /> <br /> </ul><br /> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <br /> <br /> <li class="level1-li"><a class="level1-a fly" href="#url">MY COMMUNNITY<!--[if gte IE 7]><!--></a><!--<![endif]--> <br /> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br /> <br /> <ul class="level2"> <br /> <br /> <li><a href="#url">FORUM</a></li> <br /> <br /> <ul class="level3"> <br /> <br /> <li><a href="http://sharecommunity.prophpbb.com/">SHARE COMMUNITY</a></li> <br /> <br /> <li><a href="http://budayaindonesia.prophpbb.com/">BUDAYA INDONESIA</a></li> <br /> <br /> </ul><br /> <br /> <li><a href="#url">GROUP</a></li><br /> <br /> <ul class="level3"> <br /> <br /> <li><a href="http://www.facebook.com/photo.php?pid=30656847&id=1147392995#/group.php?gid=111077538683">ELECTRICAL ENGINEERING</a></li> <br /> <br /> </ul><br /> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--> <br /> <br /> </ul></li></ul></div> <br /> <br /> <!-- BloggerSentral.blogspot.com --> <br /> <br /> <!-- Dropdown menu End -->

1. Copy paste kode HTML di samping pada HTML/Javascript gadget. Simpan kode yang telah dibuat.

/* ================================================================ <br /> <br /> This copyright notice must be kept untouched in the stylesheet at all times. The original <br /> <br /> version of this stylesheet and the associated (x)html is available at <br /> <br /> http://www.cssplay.co.uk/menus/anywidth2.html <br /> <br /> Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated <br /> <br /> (x)html may be modified in any way to fit your requirements. <br /> <br /> =================================================================== */ <br /> <br /> #menu {width:1000px; background: #3aa3d3; height:20px;; text-align:left; position:relative; <br /> <br /> z-index:500;} <br /> <br /> #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;} <br /> <br /> #menu ul {display:inline-block;} <br /> <br /> #menu li {margin:0; padding:0; list-style:none;} <br /> <br /> #menu li {display:inline-block; display:inline;} <br /> <br /> #menu ul ul {position:absolute; left:-9999px;} <br /> <br /> #menu ul.level1 {margin:0 auto; background:#710;} <br /> <br /> #menu ul.level1 li.level1-li {float:left; display:block; position:relative;} <br /> <br /> #menu ul.level1 {background:#3aa3d3;} <br /> <br /> #menu ul.level2 {background:#ae4621;} <br /> <br /> #menu ul.level3 {background:#c98b14;} <br /> <br /> #menu ul.level4 {background:#9f690e;} <br /> <br /> #menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows <br /> <br /> why --*/ <br /> <br /> #menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; <br /> <br /> line-height:25px; text-decoration:none;padding:0 20px 0 10px;} <br /> <br /> #menu ul.level1 li.level1-li a.level1-a {float:left;} <br /> <br /> #menu ul li:hover > ul {visibility:visible; left:0; top:25px;} <br /> <br /> #menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;} <br /> <br /> #menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;} <br /> <br /> #menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; <br /> <br /> margin-top:-25px;} <br /> <br /> #menu a:hover ul {left:0; top:23px;} <br /> <br /> #menu li.left a:hover ul {left:auto; right:-1px; top:23px;} <br /> <br /> #menu li.left ul a {text-align:right; padding:0 10px 0 20px;} <br /> <br /> #menu a:hover a:hover ul, <br /> <br /> #menu a:hover a:hover a:hover ul {left:100%; visibility:visible;} <br /> <br /> #menu li.left a:hover a:hover ul, <br /> <br /> #menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;} <br /> <br /> #menu a:hover ul ul, <br /> <br /> #menu a:hover a:hover ul ul {left:-9999px;} <br /> <br /> #menu li.left a:hover ul ul, <br /> <br /> #menu li.left a:hover a:hover ul ul {left:-9999px;} <br /> <br /> #menu li a.fly {font-variant: small-caps;} <br /> <br /> #menu li.left ul a.fly {font-variant: small-caps;} <br /> <br /> #menu li a:hover, <br /> <br /> #menu li a.fly:hover {background-color:#555555;} <br /> <br /> #menu li:hover > a, <br /> <br /> #menu ul li:hover > a.fly {background-color:#555555;} <br /> <br /> #menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; <br /> <br /> margin-top:-4px;} <br /> <br /> #menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; <br /> <br /> margin-top:-29px;} <br /> <br /> #menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; <br /> <br /> border-collapse:collapse; margin-top:-4px;} <br /> <br /> #menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; <br /> <br /> border-collapse:collapse; margin-top:-29px;} <br />

2.Langkah selanjutnya copy dan paste kode CSS di samping sebelum ]]></b:skin> di kode template.

Memberi Warna Side Bar 2 kolom

Ternyata sidebar juga bisa diberi warna latar belakang. Agar tampilannya bisa seperti di blog saya ini silahkan ikuti langkah-langkah dibawah ini (khusus untuk template minima yang baru):
1.Sisipkan kode berikut diantara kode variable :
<Variable name="sidebarbgcolor" description="Warna background sidebar"
type="color" default="#999" value="#e6e6e6">

2.Tambahkan kode berikut pada kode untuk kolom sidebar, yang warna cokelat adalah kode yang harus di tambahkan.
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
background:$sidebarbgcolor; /* ini kode tambahannya */
padding: 7px; /* ini kode tambahannya */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Jika penambahan kode sudah selesai, jangan lupa untuk menekan tombol Simpan Template. Apabila kolom sidebarnya ada dua langkahnya sama saja, tinggal buat variable, kemudian sisipkan kode tambahan pada sidebar yang satunya lagi.

Membuat Side Bar 2 kolom

Di sini saya menggunakan template minima karena kode-kode HTML dan CSS nya dapat dibedakan dengan mudah. Untuk default template minima pengaturan tampilannya sangat sederhana sekali. Bagi yang senang mengutak-atik tampilan blognya, sekarang saya akan memberi sedikit bocoran mengenai cara untuk membuat sidebar 2 kolom. Ikuti langkah-langkah dibawah ini :
1.Cari kode program berikut :
#sidebar-wrapper(
width:220px;
float:right;
word-wrap:break-word;/*fix for long text breaking sidebar float in IE*/
overflow:hidden;/*fix for non-text content breaking IE sidebar float*/

2.Tambahkan kode berikut di bawah kode di atas :
#sidebarbaru-wrapper(
width:220px;
float:right;
word-wrap:break-word;
overflow:hidden;

3.Setelah itu cari kode seperti berikut:
<br /> <div id='sidebar-wrapper'><b:section class='sidebar' id='sidebar' preferred='yes'><br /> <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/><br /> </b:section><br /> </div>

4.Tambahkan kode berikut di bawah kode nomor 3 di atas :
<br /> <div id='sidebarbaru-wrapper'><b:section class='sidebar' id='sidebarbaru' preferred='yes'><br /> </div>

Dua kolom sidebar telah tercipta. Agar lebih menarik kita dapat menyesuaikan lebar header dan footernya dengan lebar dari Outer-wrapper.

Membuat Efek Marquee

<marquee align='center' behavior='alternate' direction='left' height='30' scrollamount='2' width='100%'>=====Welcome to My Blog=====</marquee>

Marquee adalah suatu program HTML untuk membuat teks yang dapat bergerak. Marquee ini dapat dibuat dengan menggunakan tag<marquee>...</marquee>.Efek marquee yang digunakan dalam tampilan blog ini adalah seperti pada kode di samping: Untuk mengubah arah gerak tulisan maka pada bagian direction dapat diganti dengan right.

Mengatur Tampilan Blog dengan CSS

Untuk mengatur tampilan blog ini saya gunakan CSS yang digabungkan dengan HTML. Hal-hal yang saya ubah disini adalah warna tulisan, background color, image, border, serta susunan blog saya sehingga susuan blog saya tidak lagi seperti susunan pada tempalate yang disediakan.
Langkah-langkah yang saya lakukan :
1. Login ke blog.
2. Pilih kostumisasi lalu tata letak kemudian pilih template baru.
3. Pada template ini pilih template yang simple.
4. Setelah itu klik edit HTML.

Susunan blog ini diatur dengan konsep tabel-tabel sehingga memudahkan pengaturannya. Untuk menyusun tampilan dalam bentuk tabel digunakan coding sebagai berikut :
<table>
<tr>
<td>
<div class='top-menu-bar' id='top-menu-bar'>
<table align='right'>
<tr>
<td width='100'>
<a href='http://angelinavania.blogspot.com'>Home</a></td>
<td width='100'>
<a href='http://angelinavania
<td width='75'>
<a href='http://www.facebook.com/people/Vania-Angelina/1234124137'>My Facebook</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td style='background-color: #FFBBE8; border: 5px solid red;'><b:section class='main-content' id='main-content' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</td>
</tr>
</table>

</td>
<td valign='top'>
<b:section class='side-bar-left' id='side-bar-left' showaddelement='yes'>
<b:widget id='Text1' locked='false' title='Welcome..........' type='Text'/>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Pengikut' type='Followers'/>
</b:section>
</td>
<td valign='top'>
<b:section class='side-bar-right' id='side-bar-right' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Image1' locked='false' title='Mashimaro' type='Image'/>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
</b:section>
</td>
</tr>
</table>


Untuk membuat konfigurasi link pada top menu bar digunakan coding sebagai berikut :
<style id='internal-style' type='text/css'>
#top-menu-bar {padding: 3px 3px 3px; background-color: #b47b10; color: #FFFFFF; font-weight: bolder;}
#top-menu-bar a {color: #C3D9FF; text-decoration: none;}
#top-menu-bar a:hover {background-color: transparent; color: #FFFFFF; text-decoration: underline;}
</style>

Untuk membuat border digunakan coding sebagai berikut :
<td style='background-color: #FFBBE8; border: 5px solid red;'><b:section class='main-content' id='main-content' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</td>

Demikianlah penjelasan sekilas tentang coding-coding yang saya gunakan untuk mengatur tampilan blog saya. Semoga bermanfaat :p

CASCADING STYLE SHEET

CSS bekerja bersama dengan HTML untuk mengatur tampilan dari file HTML pada browser. HTML sendiri digunakan untuk memformat halaman web sedangkan CSS digunakan untuk mengatur hal-hal yang berkaitan dengan warna, tampilan (style). CSS ini sebenarnya dapat diaplikasikan untuk berbagai macam bahasa pemrograman tetapi dalam bahasan kali ini hanya akan dibahas penggunaan CSS dengan HTML. Untuk aturan penulisan CSS ini adalah sebagai berikut :

 Selector merupakan bagian pada HTML berupa tag, ID atau class di mana CSS akan diaplikasikan.

 Declaration block, semua yang terdapat dalam kurung kurawal ini dinamakan kotak deklarasi yang digunakan untuk menuliskan deklarasi instruksi yang diinginkan.

 Declaration adalah semua instruksi yang terdapat dalam kotak deklarasi yang dapat merupakan instruksi dalam bentuk HTML maupun gabungan antara HTML dan CSS.

 Property merupalah salah satu bagian dari CSS yang digunakan untuk mengubah selector.

 Value merupakan nilai yang diberikan untuk property.



Terdapat 3 macam selector yaitu :

1. selector yang langsung dan sederhana

Kita lihat contoh penulisan HTML:

Sekarang kita akan membuat tag <h1> ini menjadi berwarna merah :

2. Selector untuk mendefinisikan kelas

Kita gunakan (.). contoh :

Kode ini menyatakan bahwa semua tag <h1> dengan kelas ”hdr” diberi warna merah. Untuk mendifinisikan kelas ini tidak harus menyisipkan atribut HTML, sehingga dapat dituliskan sebagai berikut :

Kode di atas berarti semua elemen HTML dengan kelas ”hdr” akan berwarna merah. Hal ini akan sangat membantu jika kita ingin mengaplikasikannya untuk tag HTML yang berbeda dengan style yang sama.

Atau dapat juga atribut kelas dalam HTML memiliki beberapa nilai yang dipisahkan dengan spasi. Sehingga tag <h1> memiliki kelas ”hdr” dan ”main”.

Sehingga untuk membuat tag <h1> berwarna merah kita gunakan 3 baris instruksi :

3. CSS ID

ID ini digunakan hanya sekali dalam suatu halaman HTML dan untuk mendefinisikan ID digunakan tanda #.

Kode di atas akan membuat <h1> dengan ID mainhdr berwarna merah. Seperti pada selector kelas, penulisan ID juga dapat dilakukan tanpa menyisipkan elemen HTML :

Penggunaan selector juga tidak terbatas. Kita dapat menggunakan lebih dari 1 selector seperti pada contoh berikut :

CSS DESCENDANT SELECTOR

Dari kode HTML di atas kita memiliki 2 paragraf. Di sini terlihat penggunaan tag

dimana tag ini berfungsi sebagai ”parent” dari seperti yang merupakan ”grandparent” dari paragraf pertama dan sebagai ”parent” dari paragraf kedua. Dengan kata lain, dikatakan sebagai ”ancestor” untuk kedua paragraf.





Sekarang kita gunakan CSS untuk mengganti warna seluruh paragraf dengan div sebagai ancestor.

Kode CSS tersebut akan membuat seluruh paragraf yang terdapat dalam tag berwarna merah.
 
Untuk menggunakan CSS dalam website dapat dilakukan dengan 3 cara:


1. inline CSS


Penambahan CSS secara langsung ke elemen yang memiliki atribut style.

2. internal CSS


Penambahan CSS ke dalam dari dokumen dengan menggunakan elemen style.

3. external CSS

Penambahan CSS dengan cara menuliskan ektensi file menjadi .css.

 

---

sumber : http://cssvideos.com/css-basics/embedding-css-in-your-website/

About

About Me

Saya mahasiswa ELEKTRO UNTAR angkatan 2006. Blog ini saya buat dalam rangka tugas kuliah yang pada semester ini sedang saya ambil yaitu Aplikasi Multimedia dan Komunikasi Internet. Blog ini berisi tugas-tugas kuliah saya yang secara rutin saya posting untuk memenuhi nilai tugas tersebut. Saya harap blog ini dapat membantu menambah wawasan pembaca. Kritik dan saran sangat terbuka untuk memperbaiki kualitas blog ini maupun tulisan-tulisan saya....

Thank You  ☺

Rangkuman Seminar PC Modding

Pada hari Rabu, 26 Agustus 2009 bertempat di Auditorium Gedung Utama UNTAR diadakan seminar sehari bertema PC Modding dan design games. Dalam acara ini diundang lima pembicara yang berasal dari Intel Indonesia, majalah CHIP, Ketua Robotics Untar, majalah Concept, dan Catrix Studio. Masing-masing pembicara memberikan materi presentasi yang menarik dan menambah wawasan. Selain diadakan seminar, ada juga pameran notebook dari berbagai macam merek notebook seperti Toshiba, ASUS, VANEO, dll.


Pembicara pertama yaitu Bapak David dari Intel Indonesia yang memberikan materi presentasi mengenai chip-chip prosesor yang dikeluarkan oleh Intel. Di pasaran saat ini terdapat berbagai macam prosesor seperti Intel Atom dan Intel Core.

 Intel Atom

Intel Atom merupakan prosesor terkecil, hemat daya, dan dibuat menggunakan teknologi 45 nm Hi-K metal gate. Prosesor ini memungkinkan digunakan pada komputer dengan harga terjangkau, pemakaian daya yang relatif rendah tetapi mempunyai kinerja yang cukup baik untuk pemakaian sehari-hari (basic computing). Prosesor ini dirancang khusus untuk platform nettop, netbook, dan internet mobile device. Untuk OS dapat digunakan seperti Windows/Linux yang tidak memakan banyak sumber resources.

 Intel Core

Terdapat beberapa jenis yaitu Core 2 Duo, Core 2 Quad dan Core i7. Core i7 yang baru dikeluarkan ini diklaim sebagai prosesor tercepat yang dapat meningkatkan performance dari komputer kita. Core i7 ini men-support sampai 3 channel memori dengan kapasitas memori mencapai 3GHz. Prosesor ini bagus digunakan untuk membuat desain dan animasi.

Pembicara kedua yaitu Bapak Dedi Irvan yang merupakan koordinator Chip-test center. Beliau mempresentasikan mengenai Desktop vs Notebook yaitu mengenai kelebihan dan kekurangannya dan juga macam-macam PC serta komponen di dalamnya.

Beberapa komponen dalam komputer yaitu:

 Motherboard → basic dari PC

 Prosesor → otak dari PC

 RAM → menampung data yang akan dieksekusi, kinerjanya bergantung pada frekuensi, jumlah channel, dan latency. Umumnya RAM ini makin besar kapasitasnya makin baik, tetapi hal ini tergantung dari OS yang digunakan apakah bisa menggunakan seluruh memori RAM atau tidak.

 Graphics card → untuk menampilkan gambar pada layar, kinerjanya bergantung pada teknologi, frekuensi, dan ukuran memori.

Macam-macam PC:

 Basic computing PC

 Multimedia PC

 Gaming PC

 Workstation


Pembicara ketiga yaitu Bapak Edy Syahputra, ST yang merupakan Ketua Robotics UNTAR dan alumni dari Teknik Elektro UNTAR. Beliau memberikan presentasi mengenai robot dan perkembangannya di lingkungan UNTAR. Beliau mengatakan bahwa robot merupakan gabungan dari ilmu mekanika, artificial intelligence, dan elektronika. Robot sudah banyak digunakan dalam bidang militer, kedokteran, industri, hiburan, entertainment, dan rumah tangga. Bersama timnya, beliau pernah menjuarai berbagai macam perlombaan robot untuk berbagai macam kategori.


Pembicara keempat yaitu Bapak J. Edward Soehendra yang mempresentasikan bagaimana cara memilih VGA card. VGA memiliki keterkaitan dengan game yaitu akan membuat proses rendering game-nya lebih detail dan efek yang ditimbulkan akan tampak realistis. Untuk menjalankan fitur-fiturnya dibutuhkan VGA card yang lebih tinggi. Untuk memilih VGA pertimbangkan hal-hal berikut:

 Kebutuhan

 Budget

 Peripheral

 Konsumsi daya


Pembicara kelima yaitu Bapak Chandra yang merupakan perwakilan dari Cartridge Studio yang memberikan presentasi dengan topik perkembangan game global. Beliau mengatakan bahwa untuk mendesain suatu game dibuthkan proses-proses sebagai berikut:

 Story → cerita tentang game yang akan dibuat

 Concept → ilustrasi game yang dibuat dalam bentuk 3D

 Prototype → membuat model/objek

 Creating the game asset

 Game testing

 Bug fixing

 Final touch/marketing materials → memperhalus tampilan game

Kemampuan yang dibutuhkan untuk membuat game adalah sebagai berikut:

 Concept artist

 Modeler → 3D artist yang bertanggung jawab untuk membuat model seperti karakter, vehicle, background

 Texture artist

 Animator

 Terkadang juga terdapat lighting artist, rigger, dll


Sedangkan Bapak Joko Hartanto dari Pemimpin Redaksi majalah Concept memberikan presentasi mengenai bagaimana desain yang baik itu. Materi ini diberikan sebagai bekal bagi para peserta seminar yang ingin mengikuti kompetisi PC modding yang diadakan oleh teknik elektro. Berikut adalah 10 filosofi desain yang baik menurut Dieter Rams seorang desainer kawakan:

 Good design is innovative
 Good design make a product useful
 Good design is aethestic

 Good design makes a product understandable

 Good design is honest

 Good design is unobstructive

 Good design is long lasting

 Good design is consequent to last detail

 Good design is concerned with the environment

 Good design is simplicity not of a design, as a little design as possible


Demikian rangkuman ini dibuat, semoga bermanfaat dan menambah wawasan kita semua. (Van’z).