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
Kamis, 24 September 2009
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
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 Sekarang kita gunakan CSS untuk mengganti warna seluruh paragraf dengan div sebagai ancestor.
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.
Rabu, 23 September 2009
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 ☺
Sabtu, 05 September 2009
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).
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 Core
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).
Langganan:
Postingan (Atom)
.jpg)
