KIAT-KIAT SUKSES: Desaign Web

Tampilkan postingan dengan label Desaign Web. Tampilkan semua postingan

Rabu, 24 Agustus 2011

Pengenalan CSS

02.28 Subli Kerta No comments

CSS (Cascading Style Sheet) merupakan style (berisi kelompok property) yang akan digunakan untuk memberikan efek dinamis pada tag html. Contoh format penulisan CSS adalah:

<HEAD>

Kriteria-Pilihan { property1:nilai1; property2:nilai2 ; }

</STYLE>

</HEAD>

Hal terpenting yang perlu diperhatikan dalam pembuatan CSS adalah kode CSS yang dibuat harus disisipkan pada tanda tag <HTML>. Kriteria-Pilihan merupakan tag-tag yang dikenali oleh HTML. Property merupakan tag yang sesuai dengan tag-tag HTML yang dibuat dalam Kriteria Pilihan misalnya tag BODY,P,Heading atau yang lainnya.

Kemudian nilai merupakan ag nilali dari tag HTML yang sesuai dengan property. Property dan nilai dipisahkan denagn tanda titik dua(:), sedangkan antar property yang satu dengan yang lain dipisahkan dengan tanda titik koma (;). Secara keseluruhan, semua itu (property dan nilai) disimpan dalam tanda kurung kurawal.

Ada tiga cara yang dapat digunakan untuk menggunakan CSS pada halaman web, yaitu:

Linked Style Sheet

Sesuai dengan namanya, cara ini adalah dengan melakukan pemanggilan pada style yang telah dibuat khusus pada file terpisah. Tetapi tidak semua file dapat dipanggil, file yang dapat dipanggil adalah file yang berekstensi .css. Pemanggilan CSS dengan cara ini termasuk cukup praktis sekali, karena kita dapat menggunakan style yang sama pada sebuah halaman web.

Inline Style Sheet

Cara Inline Style Sheet sebenarnya kurang praktis karena tiap-tiap tag harus didefinisikan dengan kode-kode CSS, hal ini jelas tidak praktis. Apalagi jika tag yang kita gunakan banyak sekali, yang berarti kita akan mengulang atribut STYLE sebanyak tag yang dimaksud. Juga pencampuran kode CSS dengan dokumen lainya yang semakin semrawut. Contoh program Inline Style Sheet:

<html>

<head>
<title>Inline CSS </title>

</head>

<h1 STYLE=”text-align:center; border-width:4pt; border-style:outset;

background-color:yellow;padding:4pt; font-family:Helvetica;

color:navy”>

coba.coba.coba

</h1>

<p STYLE=”text-align:center; font-family:Helvetica; font-style:italic;

font-weight:bold; text-indent:12pt; color:green”>

“————-Web Development———————“

</body>

</html>

Embedded Style Sheet

Embedded Style Sheet adalah cara untuk membuat definisi style dengan menanamkan kode CSS pada tag khusus, yaitu tag <STYLE>. Untuk menggunakan cara ini, tag <STYLE> harus diletakkan di antara tag <HTML> dan <BODY>. Contoh program dengan Embedded Style Sheet:

<html>

<head>

<title>Embed CSS</title>

</head>

H2 { font-family:Console;

text-align:center;

color:navy}

P.satu {font-family:Helvetica;

font-style:italic;

text-indent:12pt;

color:red}

P.dua {font-family:Arial;

text-decoration:underline;

text-indent:14pt;}

–></style>

<h2>embed style….</h2>

kode-kode style

paragraf dua

</body>

</html>

1. Memodifikasi CSS

Untuk memodifikasi CSS pada halaman yang telah anda buat, anda tinggal meng-klik tombol CSS yang ada pada property inspector

Kemudian pada sebelah kanan akan mucul:

Anda dapat menambah aturan maupun mengeditnya menggunakan tombol tersebut.

2. Membuat Page dengan CSS

Pada Dreamweaver disediakan CSS yang dapat membuat sebuah halaman seperti Template, caranya:

FileàNew

Pilih Page Designs (CSS), kemudian pilh jenis halaman dan klik Create.

Setelah halaman dibuat anda dapat memodifikasinya.

Pengenalan Javascript

02.26 Subli Kerta No comments

JavaScript adalah bahasa yang berbentuk kumpulan script yang pada fungsinya berjalan pada suatu dokumen HTML, bahasa ini adalah bahasa script pertama untuk web dan merupakan bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah di sisi user, yang artinya disisi browser bukan disisi server web. Untuk memanggil halaman web yang berisi script dari JavaScript hanya memerlukan browser (navigator) karena JavaScript tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya.

Script dari Javascript terletak di dalam dokumen HTML. Kode tersebut tidak akan terlihat dari dalam jendela navigator, karena di antara tag tertentu yang memerintah navigator untuk memperlakukan bahwa script tersebut adalah script dari JavaScript. Contoh dari script yang menunjukkan bahwa script tersebut adalah script Javascript :

bagian untuk menuliskan script

</SCRIPT>

Namun sering kali pada navigator versi lama tidak mengenal tag tersebut dan melewatkan untuk dibaca. Contoh kode di atas tidak akan terlihat di navigator akan tetapi akan menampilkan jendela peringatan (berupa kotak dialog) karena script tersebut tidak lengkap dan merusak dokumen HTML yang sudah kita buat. Untuk itu maka ditambahkan tag komentar supaya scriptnya tidak dibaca sebagai script, akan tetapi di baca sebagai komentar dan tidak dieksekusi program. Contohnya adalah :

<!–

bagian untuk menuliskan script

// –>

1. Membuat Teks berjalan pada Statusbar

Untuk membuat teks yang berjalan pada status bar secara terus menerus anda dapat menambahkan script javascript sebagai berikut pada halaman HTML anda, letakkan setelah tag </head> :

<!–

function parameter()

{

this.tul = ” Manajemen Sistem Informasi ”

this.kec = 200;

this.pos = 0;

this.tulgul = ” “;

}

var gul=new parameter();

function gultul()

{

if(gul.pos > gul.tul.length)

{

gul.pos=0;

}

gul.tulgul=” “;

gul.tulgul +=gul.tul.substring(gul.pos, gul.tul.length);

gul.tulgul +=gul.tul.substring(0, gul.pos);

window.status = gul.tulgul;

gul.pos++;

setTimeout(“gultul()”, gul.kec);

}

//–>

</script>

Penjelasan :

this.tul à merupakan variabel untuk menyimpan teks yang akan dimanipulasi.

this.tulgul à merupakan variabel yang digunakan untuk mengubah nilai atribut VALUE

Untuk memanipulasi teks menggunakan substring dan untuk menentukkan selang waktu pergantian nilai atribut VALUE menggunakan metode setTimeout()

Untuk menulis pada statusbar, bisa dilakukan dengan mengisi properti status pada objek window. Seperti : window.status = “tulisan pada statusbar”

Fungsi gultul() akan dijalankan 1 detik kemudian (satuannya adalah 1/1000 detik). Agar fungsi gultul() dapat dijalankan secara terus menerus setiap selang waktu tertentu, maka metode setTimeout() harus ditempatkan pada bagian akhir fungsi gultul().

Agar fungsi gultul() langsung dijalankan ketika halaman diakses, tempatkan fungsi gultul() pada elemen BODY seperti berikut :

<body>

2. Membuat Teks Bergulung pada Area Teks

Teks yang terdiri dari satu atau lebih baris bergulung dari bawah area teks menuju ke atas secara terus menerus, scriptnya adalah sebagai berikut :

<!–

var pesan = new Array()

pesan[1]=”Pengumunan”

pesan[2]=”Manajemen”

pesan[3]=”Sistem”

pesan[4]=”Informasi”

var jmlpsn=4

var pesangulung = “”

var maks=2*jmlpsn

var kec=500

var leb=20

var awal=1

var akhir=1

for(x=1; x<=jmlpsn; x++)

{

pesan [x + jmlpsn] = pesan [x]+ “\r\n”

pesan [x] = ” ” + “\r\n”

pesan [x+maks] = ” ” + “\r\n”

}

function gultul()

{

pesangulung = “”

if(akhir >= maks + jmlpsn)

{

awal=1

}

akhir=awal + jmlpsn -1

for(x=awal; x<=akhir; x++)

{

pesangulung += pesan[x]

}

document.form1.kotakgulung.value = pesangulung

awal++

setTimeout(“gultul()”,kec)

}

–>

</script>

Kemudian jalankan fungsi gultul()

<body>

Dan letakkan script berikut pada bagian halaman yang akan ditampilkan :

document.write(“<form name=’form1′>”)

document.write(“<textarea readonly name=’kotakgulung’ rows=” +jmlpsn+”cols=” +leb+”>”)

document.write(“</textarea>”)

document.write(“</form1>”)

</script>

3. Menampilkan Tanggal dan Jam

Untuk menampilkan hari, tanggal, bulan, tahun dan jam. Tambahkan script berikut pada bagian halaman yang akan menampilkanya:

<style>

.jam{

font-family:Arial, Helvetica, sans-serif;

color:#000080;

font-size:12px;

position:relative;

top:auto;

left:auto;

}</style>

<!–

var tgllengkap = new String();

var namahari = (“Minggu Senin Selasa Rabu Kamis Jumat Sabtu”);

namahari = namahari.split(” “);

var namabulan = (“Januari Februari Maret April Mei Juni Juli Agustus September Oktober November Desember”);

namabulan = namabulan.split(” “);

var tgl = new Date();

var hari = tgl.getDay();

var tanggal = tgl.getDate();

var bulan = tgl.getMonth();

var tahun = tgl.getYear();

function tampiljam()

{

var waktu = new Date()

var jam = waktu.getHours();

var menit = waktu.getMinutes();

var detik = waktu.getSeconds();

var jamlengkap = new String();

if(menit <= 9)

menit = “0″ + menit;

if(detik <= 9)

detik = “0″ + detik;

jamlengkap = jam + “:” + menit + “:” + detik;

tempat.innerHTML = jamlengkap;

setTimeout(“tampiljam()”,1000);

}

tgllengkap = namahari[hari] + “, ” + tanggal + ” ” + namabulan[bulan] + ” ” + tahun;

document.write(“<font size=1 face=’helvetica,arial’ color=’#000080′>” + tgllengkap + “<\/font>”);

window.onload = tampiljam

//–>

</script>

4. Membuat menu drop down

Menu drop down merupakan menu yang jika di klik menu tersebut akan muncul menu kebawah, untuk membuatnya scriptnya adalah sebagai berikut :

Sebelumnya tambahkan script ini pada bagian style :

<style>

.title{

font-family:verdana;

font-weight:bold;

font-size:12px;

position:relative;

width:80px;

background:blue;

color:white;

text-align:center;

cursor:hand;

}

.menuitem{

font-family:verdana;

font-size:12px;

text-decoration:none;

position:relative;

cursor:default;

}

</style>

var i=true

function showhide()

{

if(i)

document.all.mn0.style.visibility=”visible”;

else

document.all.mn0.style.visibility=”hidden”;

i=!i;

}

</script>

Kemudian tambahkan script berikut pada bagian halaman yang akan menampilkannnya :

<tr>

<td width=”80″ bgcolor=”cyan” onMouseOut=”style.background=’cyan’”><a class=”menuitem” href=”http://google.com”>Google</a></td></tr>

<tr>

<td width=”80″ bgcolor=”cyan” onMouseOut=”style.background=’cyan’”><a class=”menuitem” href=”http://yahoo.com”>Yahoo!</a></td></tr>

</table>

</div>

PHP Object Oriented Programming

01.47 Subli Kerta No comments

Object Oriented Programming (OOP) merupakan paradigma pemrograman yang berorientasikan kepada obyek. Semua data dan fungsi pada paradigma ini dibungkus dalam kelas-kelas atau obyek-obyek. Bandingkan dengan logika pemrograman terstruktur, setiap obyek dapat menerima pesan, memproses data, dan mengirim pesan ke obyek lainnya. OOP diciptakan untuk mengatasi keterbatasan pada bahasa pemrograman tradisional. Konsep dari OOP sendiri adalah semua pemecahan masalah dibagi ke dalam obyek. Dalam konsep OOP data dan fungsi-fungsi yang akan mengoperasikannya digabungkan menjadi satu kesatuan yang dapat disebut sebagai obyek.

Apa itu Object

Sederhananya, sebuah obyek adalah kumpulan dari variabel dan fungsi yang dibungkus menjadi satu entitas. Entitas tersebut dapat berupa variabel biasa. Sebuah obyek diciptakan melalui sebuah kelas atau dengan istilah instance of class. Obyek memiliki 2 elemen utama:

Attributes atau Properties: Yaitu nilai-nilai yang tersimpan dalam objek tersebut dan secara langsung maupun tidak langsung menentukan karakteristik dari obyek tersebut.
Method: Yaitu suatu aksi yang akan dijalankan atau dikerjakan oleh obyek tersebut.

Apa itu Class?

Class dapat didefinisikan sebagai struktur data atau cetak biru dari suatu obyek. Lebih jelasnya adalah sebuah bentuk dasar atau blueprint yang mendefinisikan variabel, method umum pada semua obyek. Obyek sendiri adalah kumpulan variabel dan fungsi yang dihasilkan dari template khusus atau disebut class. Obyek adalah elemen pada saat run-time yang akan diciptakan, dimanipulasi, dan dibuang/di-destroy ketika eksekusi. Adapun class merupakan definisi statik dari himpunan obyek yang mungkin diciptakan sebagai instantiasi dari class.

Perhatikan contoh class di berikut ini.

< ?php
/** Contoh kelas **/
class Kendaraan{}
/*** end of class ***/
?>

Contoh diatas memperlihatkan bagaimana mendefinisikan sebuah class dan meng-create sebuah instance dari class. Pada contoh di atas kita membuat sebuah kelas bernama “Kendaraan”. Dalam pembuatan kelas, pertama kita menggunakan kata kunci class yang diikuti oleh nama kelas, kemudian diakhiri dengan kurung kurawal. Di dalam kurung kurawal kita menuliskan kode-kode (berisi property dan method) supaya kelas tersebut bekerja seperti yang diinginkan.

Kode-kode di dalam sebuah kelas terbagi menjadi dua kelompok, yaitu property dan method. Property adalah suatu wadah penyimpanan di dalam kelas yang bisa menampung informasi. Sederhananya property itu bisa disebut sebagai variabel di dalam kelas. Sedangkan method adalah fungsi yang ada di dalam kelas. Perhatikan contoh berikut.

< ?php
/** contoh kelas **/
class kendaraan{
 
/*** property class ***/
private $warna;
private $jumlah_pintu;
private $jumlah_roda;
public $harga;
public $merk;
 
/*** method class ***/
public function __construct(){
echo 'ini adalah object kendaraan. <br />';
}
 
public function set_harga($harga){
$this->harga = $harga;
}
 
public function show_harga(){
echo 'harga kendaraan : rp.'.$this->harga.'. <br />';
}
 
public function jalan(){
echo 'brrroooooom!!!';
}
 
}
/*** end of class ***/
/** contoh object **/
#mengcreate object $saya_adalah_object dari class kendaraan
$saya_adalah_object= new kendaraan;
$saya_adalah_object->set_harga(100000);
$saya_adalah_object->show_harga();
$saya_adalah_object->jalan();

Setiap property dan method memiliki identifier. Identifier-lah yang mengatur bagaimana property dan method digunakan. Identifier tersebut adalah public, private dan protected. Private berarti method atau property yang ada didalam suatu kelas hanya bisa diakses di dalam kelasnya. Sedangkan pada method atau property yang bersifat public berarti method atau property tersebut bisa diakses di dalam dan di luar kelas.

Inheritance

Inheritance atau dalam bahasa Indonesianya disebut sebagai pewarisan adalah suatu carauntuk membuat sebuah kelas yang baru dengan menggunakan kelas lain yang sebelumnya sudah dibuat. Pada hubungan inheritance, sebuah class turunan mewarisi kelas leluhur (parent class). Oleh karena mewarisi, maka semua atribut dan method class dari induk akan dibawa (kecuali yang bersifat private), secara intrinsik menjadi bagian dari class anak. Adapun keuntungan yang didapat dari inheritance menambah fitur baru pada kelas anak dan mengubah atau mengganti fitur yang diwarisi dari kelas parent

Adapun contoh kelas yang menggunakan konsep inheritance adalah

< ?php
/* inheritance.php */
class Bapak {
private $nama ="Bapak";
function Bapak($n) {
$this->nama = $n;
}
function Hallo() {
echo "Halo, saya $this->nama <br />";
}
}
 
class Anak extends Bapak {
 function Hai(){
 Echo “hai dari kelas anak”;
}
}
 
$test = new Anak("Anak dari Bapak");
$test->Hallo();

Jika kita perhatikan di kelas anak sama sekali tidak memiliki fungsi hello, tetapi karena parentnya memiliki fungsi tersebut maka si anak dapat menggunakan fungsi tersebut. Selain menggunakan fungsi bapak, anak juga dapat menambah fungsi baru yaitu fungsi Hai.

Kupas GLGE

12.13 Subli Kerta No comments

GLGE

GLGE adalah program library javascript untuk mempermudah developer dalam pengembangan WebGL yang pada dasarnya merupakan browser asli javascript API (Aplication Programing Interface) yang memberikan akses langsung ke OpenGL ES2. GLGE memungkinkan hardware 2D/3D lebih cepat tanpa harus mendownload plug-in. Pemakaian GLGE bertujuan untuk menutupi sifat asli dari WebGL yang dikembangkan oleh para Web Developer untuk menciptkan konten-konten web yang lebih banyak.

GLGE dibuat di bawah lisensi (3-point) model BSD yang telah tersedia. Dalam pembangunnya, GLGE membutuhkan nodejs yang sangat sederhana, yaitu :

> git submodule init

> git submodule update

>./build.js

>./build.js --help

GLGE sangat mudah digunakan dan mempunya fitur-fitur sebagai berikut :

1. Animasi Keyframe

2. Mengatur arah pencahayaan, sorot cahaya dan titik cahaya

3. Animasi material

4. Animasi Skeletal (WIP)

5. Mendukung format Collada

6. Memetakan Parallax

7. Merender Teks/Gambar

8. Memberi efek kabur/berkabut

9. Memperdalam bayangan

10. Memberi efek penebalan

11. Memetakan Environment

12. Memberi efek pantulan/pembiasan

13. Memberi animasi Collada

14. Portals

15. LOD

16. Culling

17. Dapat menyeleksi 2D

Dokumentasi API dalam GLGE

1. GLGE : memegang fungsi Library

2. GLGE.Action : Kelas untuk menggambarkan dan tindakan pada suatu kerangka

3. GLGE.ActionChannel : Kelas untuk mendefinisikan sebuah bidang animasi pada suatu tindakan

4. GLGE.Animatable : Kelas animasi untuk memberikan penjelasan objek animasi

5. GLGE.AnimationCurve : sebuah kurva yang disipkan diantara titik kontrol

6. GLGE.AnimationVector : Sebuah kelas Animasi Vektor yang memungkinkan untuk menentukan kurva animasi 2D yang didefinisikan di dalam bagian animasi dalam suatu engine

7. GLGE.Assets : Menghandel semua penyimpanan secara global

8. GLGE.BezTriple : Sebuah kelas bezier untuk menambah titik pada Animasi Kurva

9. GLGE.Camera : Untuk membuat sebuah objek kamera baru

10. GLGE.Collada : Kelas yang mewakili sebuah Objek Collada

11. GLGE.Document : Kelas dokumen untuk memuat scene, object, mesh dan lain-lain dari sebuah file XML lain.

12. GLGE.Events : Sebuah Kelas Evvent

13. GLGE.Group : Kelas grup yang memungkinkan perubahan objek secara hirarki

14. GLGE..HeightMap : Untuk membuat sebuah tinggi peta suatu wilayah dalam dunia yang berdasarkan gambar

15. GLGE.JSONLoader : Sebuah kelas untuk memuat potongan-potongan json dari lokasi atau deretan yang dipilih.

1. GLGE.KeyInput : Mengontrol input keyboard yang digunakan dalam membuat putaran

2. GLGE.Light : Untuk membuat sebuah sumber pencahayaan baru yang akan ditambahkan pada suatu scene

3. GLGE.LinearPoint : Sebuah Kels LinearPoint untuk menambahkan titik pada Kurva animasi

4. GLGE.Material : Sebuah kelas material yang akan digunakan oleh objek dalam engine grafik

5. GLGE.MaterialLayer : Sebuah lapisan material yang menggambarkan bahaimana cara untuk menggunakan layer tersebut pada suatu material

6. GLGE.Mesh : Untuk membuat sebuah lubang baru

7. GLGE.Message : Sistem pesan GLGE

8. GLGE.MouseInput : Mengontrol input mouse yang digunakan dalam melakukan putaran

9. GLGE.MultiMaterial : Untuk membuat sebuah mesh atau material baru yang ditambahkan pada suatu objek

10. GLGE.Object : Sebuah objek yang akan dijalankan dalam suatu scene

11. GLGE.ObjectLod : Untuk membuat sebuah beban baru untuk sebuah multimaterial

12. GLGE.ParticleSystem : Sebuah tekstur yang dimasukkan dalam sebuah material

13. GLGE.Placeble : Kelas abstrak yang menjelaskan objek untuk keperluan posisi, perputaran dan skala

14. GLGE.QuickNotation : Kelas untuk melaksanakan catatan secara cepat

15. GLGE.Renderer : Mengatur sebuah scene untuk diterjemahkan

16. GLGE.Scene : Kelas scene yang mengandung kamera, cahaya dan objek

17. GLGE. StepPoint : Sebuah kelas StepPoint untuk menambahkan titik pada kurva animasi

1. GLGE.Text : Tulisan yang bisa diterjemahkan dalam suatu scene

2. GLGE.Texture : sebuah tekstur yang akan dimasukkan dalam suatu material

3. GLGE.TextureCamera : sebuah tekstur bayangan yang akan dipantulkan dalam suatu bidang untuk sebuah perubahan secara spesifik

4. GLGE.TextureCanvas : Sebuah tekstur yang dimasukkan dalam sebuah material

5. GLGE.TextureCube : sebuah tekstur yang dimasukkan dalam sebuah material

6. GLGE.TextureVideo : sebuah tekstur video yang dimasukkan dalam sebuah material

7. GLGE.Wavefront : Untuk menguraikan dan menampilkan sebuah file objek warefront dengan material MTI

Referensi :

http://dailyjs.com/2011/04/15/philogl-glge/

KIAT-KIAT SUKSES

KERTA Group

Popular Posts

Categories

Keindahan dan Keserasian Alam

Keindahan dan Keserasian Alam

Keindahan dan Keserasian Alam

Keindahan dan Keserasian Alam

Lestarikan dan Budayakan Menanam Pohon

Rabu, 24 Agustus 2011

Pengenalan CSS

Pengenalan Javascript

PHP Object Oriented Programming

Apa itu Object

Apa itu Class?

Inheritance

Jumat, 29 Juli 2011

Kupas GLGE

Share

Pengikut

Mengenai Saya

Blog archive

Belajar Digital Forensics

Pasang Iklan Disini

PASANG IKLAN DISINI

PASANG IKLAN DISINI

Connect With Us

Recomended

Instructions