- Retronal

ARTIKEL HTML 5

dikarenakan tidak ada pemberitahuan dan terjadi kesalahan saya SUCI DWI SHAPIRA ikut menitipkan tugas remedial artikel saya ke email dyovalen18@gmail.com

HTML 5 Canvas Element Template [Basic]

Elemen atau Unsur Canvas merupakan Tag HTML yang hampir sama dengan tag <table>, <div>, atau <a> dengan pengecualian yang isinya diberikan dengan Menggunakan Javascript. Dengan kata lain, untuk memanfaatkan Canvas HTML 5 anda harus menempatkan Canvas di suatu tempat di dalam tag HTML, membuat sebuah penginisialisasi fungsi Javascript yang nantinya kita gunakan untuk mengakses tag canvas setelah Page Load (setelah Loading), dan kemudian memanfaatkan HTML5 Canvas API untuk menggambarkan visualisasinya.

elemen utama yang kita gunakan disini adalah :

Karena disini saya menggunakan Blogspot, jadi untuk anda yang juga menggunakan Blogspot silahkan buat sebuah Blog testing terlebih dahulu untuk menguji postingan ini. Setelah blog percobaan tersedia, silahkan menuju Rancangan > Edit HTML Kemudian Centang Expand Template Widget. Setelah itu hapus seluruh Script Template anda. Jika Sudah silahkan tunggu dulu karena saya akan terlebih dahulu memberikan Script untuk pengguna Platform lain, Jadi untuk anda yang juga mengikuti panduan ini namun tidak menggunakan Blogspot, silahkan gunakan Script Template dibawah ini:

<!DOCTYPE html>
<html>
<head>
<script>

function init() {
var canvas=document.getElementById(“myCanvas”);
var c=canvas.getContext(“2d”);

// do stuff here
}

</script>

</head>
<body onload=”init()”>
<canvas id=”myCanvas” width=”576″ height=”300″></canvas>
</body>
</html>

Dan Untuk anda yang menggunakan Blogspot, Sebenarnya Script diatas pun dapat langsung anda gunakan, namun saya pastikan anda akan dihadapkan pada peringatan dibawah ini :

Kami tidak dapat menyimpan template Anda.

Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.

Seharunya ada satu dan hanya satu skin pada template, dan kami menemukan: 0

Untuk itu Script diatas akan sedikit kita ubah agar dapat terbaca di Blogspot. Dan berikut Script untuk anda yang menggunakan Blogspot :

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function init() {
var canvas=document.getElementById(“myCanvas”);
var c=canvas.getContext(“2d”);

// do stuff here
}

</script>
</head>
<body onload=”init()”>

Lalu silahkan Save Template anda, dan Lihat hasilnya.

Apa yang akandidapat? jika yang didapati hanyalah page Kosong artinya sudah mengikuti panduan ini dengan benar, karena disini kita memang belum membuat satupun Variabel untuk Canvas, karena kelanjutannya akan diposting di postingan kemudian.

Pengenalan Struktur HTML 5

Seiring dengan perkembangan Web yang semakin inovatif, HTML 4 yang telah berkibar selama hampir satu dekade ini akhirnya mulai semakin dikembangkan kearah yang lebih baik atau kita kenal dengan nama HTML 5.

HTML 5 menjanjikan fleksibilitas lebih bagi penulis, memungkinkan Website lebih menarik dan interaktif serta memperkenalkan dan meningkatkan berbagai Fitur, seperti Kontrol bentuk, API, multimedia, struktur, dan semantik.

HTMl 5 Mulai bekerja pada tahun 2004, dibawah asuhan W3C HTML WG dan WHATWG. Bahkan, Empat Vendor Browser besar seperti Firefox, Apple, Opera, Dan Google kabarnya ikut mengembangkan HTML 5.

Struktur Dasar HTML dapat di lihat dibawah ini:

Gambar diatas adalah Struktur HTMl 4 yang masih menggunakan Elemen div yang masing-masing memberikan id deskriptif atau kelas untuk menggambarkan bagian-bagian khusus. Versi HTML 4 masih kekurangan semantik. HTML 5 mulai memperbaiki hal ini dengan membuat masing-masing elemen mewakili bagian yang berbeda dan tidak perlu menggunakan penggambaran khusus. Contohnya seperti gambar dibawah ini :

Gambar diatas menunjukkan bahwa Elemen-elemen div dapat digantikan dengan unsur-unsur baru: header, nav, bagian, artikel, samping, dan footer.

Markup untuk Dokumen dapat digambarkan sebagai berikut:

Contohnya, Struktur Dibawah ini yang ditandai dengan bagian nested dan elemen h1:

<section>
<h1>Level 1</h1>

<section>
<h1>Level 2</h1>

<section>
<h1>Level 3</h1>

</section>
</section>

</section>

Perhatikan Struktur Diatas, Untuk kompabilitas yang lebih baik dengan Browser saat ini, telah dimungkinkan menggunakan elemen post lain (h2 untuk h6) tepat ditempat elemen h1. itulah salah satu keuntungan menggunakan elemen ini.

Dengan mengidentifikasi halaman menggunakan elemen sectioning spesifik, teknologi bantu dapat membantu pengguna untuk lebih mudah menavigasi halaman. Misalnya, mereka dengan mudah dapat melompat ke bagian navigasi atau cepat melompat dari satu artikel ke berikutnya tanpa perlu bagi penulis untuk memberikan skip link.

Pada elemen header anda dapat menyertakan sub judul, informasi atau lainnya. Seperti Struktur Dibawah Ini:

<header>
<h1>A Preview of HTML 5</h1>

<p class=”byline”>By Ferdinand</p>

</header>

<header>
<h1>Example Blog</h1>

<h2>Insert tag line here.</h2>

</header>

Setelah itu bagian lainnya adalah Footer yang berisi data hak Cipta, Link ke halaman Terkait dan lainnya, Strukturnya seperti dibawah ini:

Selanjutnya adalah bagian link navigasi, dengan struktur seperti dibawah ini:

<li><a href=”/prolog”>Prolog</a></li>

<li><a href=”/contact”>Contact</a></li>

<li><a href=”/about”>About</a></li>

</ul>
</nav>

Selanjutnya adalah Struktur Sidebar, seperti dibawah ini:

<aside>
<h1>Archives</h1>
<ul>
<li><a href=”/2010/09/”>September 2010</a></li>

<li><a href=”/2010/08/”>August 2010</a></li>

</ul>

</aside>

Selanjutnya, Section yang merupakan bagian utama dalam sebuah dokument, misalnya kita bayangkan seperti sebuah Bab dengan Struktur seperti dibawah ini:

<section>
<h1>Chapter 1: Saya Orang Kreatif</h1>

<p>

Banyak yang bilang saya gak cerdas dan bengal, dan saya akui demikianlah saya, tapi ditengah kebodohan saya, saya tetap bersyukur diberikan otak yang kreatif oleh Tuhan

…</p>
</section>

Terakhir adalah Unsur artikel, yang berisi konten, postingan, komentar dan lainnya, Strukturnya seperti dibawah ini:

<header>
<h4><a href=”#comment-3″ rel=”bookmark”>Comment #3</a>

by <a href=”http://example.com/”>Google</a></h4>

<p><time datetime=”2010-08-29T13:58Z”>August 29th, 2010 at 13:58</time>

</header>
<p>Blogwalking Gan!</p>

</article>

HTML 5 Canvas Path Tutorial [Basic]

Melanjutkan pembahasan kita sebelumnya tentang HTML 5 Canvas Bezier Curve Tutorial [Basic], pagi ini saya ingin mengajak anda untuk beralih ke Method baru kita selanjutnya, yaitu beginPath. Apa kegunaan dari Method beginPath ini? kita bisa menggunakan beginPath setiap kali kita ingin membuat sebuah Path atau jalur baru. Nha disini, kita pun masih akan memanfaatkan pembahasan kita yang sebelum-sebelumnya, karena disini kita masih akan menggunakan Method lineTo, quadraticCurveTo, dan bezierCurveTo untuk membuat Subpath(bagian dari path) menjadi path atau jalan yang ingin kita bentuk. Kenapa? karena method baru kita kali ini tidak mempunyai Koordinat seperti Method-method sebelumnya, untuk lebih jelasnya perhatikan susunan Method path dibawah ini:

c.beginPath.

Terlihat jelas bahwa untuk membuat sebuah jalur, kita membutuhkan bantuan dari Method lineTo, quadraticCurveTo, dan bezierCurveTo.

Untuk bentuknya, Path bisa dibuat menjadi berbagai bentuk sesuai Imaginasi dan keinginan kita, bahkan Demo Harmonic Oscillator sebelumnya bisa dibilang masih menjadi bagian dari pembahasan tentang Path.

Dan berikut Script kita kali ini:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function drawPath() {
var canvas=document.getElementById(“myCanvas”);
var c=canvas.getContext(“2d”);

c.beginPath();
c.moveTo(100,20);
c.lineTo(200,160); // line 1
c.quadraticCurveTo(230, 190, 250,120); // quadratic curve
c.bezierCurveTo(290, 20, 300, 200, 400, 150); // bezier curve
c.lineTo(500, 90); // line 2

c.lineWidth=5;
c.strokeStyle=”#0000ff”;
c.stroke();
}

</script>
</head>
<body onload=”drawPath()”>
<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
</body>
</html>

untuk mempraktekkannya, silahkan Menuju Rancangan > Edit HTMLKemudian Centang Expand Template Widget, Hapus seluruh isi Template anda dan copy paste Script diatas ke dalam Template anda(Gunakan Blog Uji Coba anda yang saya suruh sebelumnya). Jika sudah, Save Template anda dan lihat hasilnya. Dan Untuk para Pecinta HTML 5 dengan Platform lain, silahkan buang bagian skinnya.

Keterangan Diagram dari HTML5 Canvas Path :

HTML 5 Canvas Image Tutorial [Basic]

Untuk membuat suatu gambar, kita dapat menggunakan MethoddrawImage. Disini kita memerlukan Objek gambar dan titik tujuan. Titik tujuan relatif mengarah ke sudut atau pojok atas gambar.

kali ini Method yang akan di gunakan adalah :

c.drawImage(imageObj,destX,destY);

Berikut Scriptnya:

<?xml version=”1.0″ encoding=”UTF-8″ ?>

<!DOCTYPE html>

function drawImage() {

var canvas=document.getElementById(“myCanvas”);

var c=canvas.getContext(“2d”);

var destX = 69;

var destY = 50;

var imageObj = new Image();

imageObj.onload = function() {

c.drawImage(imageObj,destX,destY);
}
imageObj.src = “Url Gambar Anda“;

}

</script>
</head>
<body onload=”drawImage()”>

</body>
</html>

Untuk mempraktekkannya, silahkan Menuju Rancangan > Edit HTMLKemudian Centang Expand Template Widget, Hapus seluruh isi Template anda dan copy paste Script diatas ke dalam Template anda(Gunakan Blog Uji Coba anda yang saya suruh sebelumnya). Jika sudah, Save Template anda dan lihat hasilnya. Dan Untuk para Pecinta HTML 5 dengan Platform lain, silahkan buang bagian skinnya.

Penjelasan HTML 5 Canvas Image Ini:

Karena Method drawImage membutuhkan Objek Gambar, kita harus terlebih dahulu menyiapkan gambar dan tentunya harus menunggu sampai Load Image dari Hostingan terbaca. Jadi prosesnya pun tergantung dari Load Image yang anda gunakan. Dan tentunya, karena kita memanfaatkan hostingan, kita pun harus menggunakan Properti onload dan menentukan Sumber Url Gambar dengan src.

HTML 5 Canvas Text Tutorial [Basic]

Untuk membuat Teks dengan memanfaatkan Kanvas HTML 5, kita akan menggunakan satu Method baru yang akan saya perkenalkan kepada anda semua, yaitu Method fillText. Teks sendiri didefinisikan dengan sebuah nilai String dan sebuah posisi.

Susunan Method ini adalah:

c.fillText(“Life is good if you create a beautiful (My Dad)”, x, y);

Dan IniScript yang di gunakan:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function drawText() {
var canvas=document.getElementById(“myCanvas”);
var c=canvas.getContext(“2d”);

var x = 250;
var y = 200;
c.fillText(“Life is good if you create a beautiful (My Dad)”, x, y);
}

</script>
</head>
<body onload=”drawText()”>
<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
</body>
</html>

HTML 5 Canvas Radial Gradient Tutorial [Basic]

Untuk membuat Kanvas Gradien Radial kita dapat menggunakan Method baru kita, yaitu: createRadialGradient. HTML5 Canvas Radial Gradient atau Kanvas Gradien radial ini didefinisikan dengan dua buah lingkaran Imajiner(Lingkaran Awal dan Lingkaran Akhir).

Berikut Susunan Methodnya:

c.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)

Dan berikut Script di gunakan untuk membuatnya:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function drawCloud() {
var canvas=document.getElementById(“myCanvas”);
var c=canvas.getContext(“2d”);

c.beginPath(); // begin custom shape
c.moveTo(170,80);
c.bezierCurveTo(130, 100, 130, 150, 230, 150);
c.bezierCurveTo(250, 180, 320, 180, 340, 150);
c.bezierCurveTo(420, 150, 420, 120, 390, 100);
c.bezierCurveTo(430, 40,370, 30, 340, 50);
c.bezierCurveTo(320, 5,250, 20, 250, 50);
c.bezierCurveTo(200, 5,150, 20, 170, 80);
c.closePath(); // complete custom shape

var grd=c.createRadialGradient(238,50,10,238,50,200);
grd.addColorStop(0,”#8ED6FF”); // light blue
grd.addColorStop(1,”#004CB3″); // dark blue
c.fillStyle=grd;
c.fill();

c.lineWidth=5;
c.strokeStyle=”#0000ff”;
c.stroke();
}

</script>
</head>
<body onload=”drawCloud()”>
<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
</body>
</html>

Keterangan Dan Penjelasan Dari HTML 5 Canvas Radial Gradient ini:

Perhatikan diagram diatas. Untuk membuat Radial Gradien kita perlu mendefinisikan dua lingkaran imajiner (lingkaran awal dan lingkaran akhir) menggunakan Method createRadialGradient . Gradien radial yang berasal dari lingkaran awal akan bergerak secara radial ke ujung lingkaran.

HTML 5 Canvas Oval Tutorial [Basic]

Untuk membuat bentuk oval, kita dapat menggunakan MethodbezierCurveTo, yang Control point-nya terletak pada 4 sudut dari sebuah persegi panjang Imaginer yang nantinya membingkai bentuk Oval.

Method yang di gunakan adalah:

c.bezierCurveTo(cPointX1, cPointY1, cPointX2, cPointY2, endPointX, endPointY);

Dan berikut Script untuk pembuatannya:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function drawOval() {
var canvas=document.getElementById(“myCanvas”);
var c=canvas.getContext(“2d”);

// define center of oval
var centerX = 288;
var centerY = 100;

// define size of oval
var height = 100;
var width = 250;

var controlRectWidth = width * 1.33;

c.beginPath();
c.moveTo(centerX,centerY – height/2);
// draw left side of oval
c.bezierCurveTo(centerX-controlRectWidth/2,centerY-height/2,
centerX-controlRectWidth/2,centerY+height/2,
centerX,centerY+height/2);

// draw right side of oval
c.bezierCurveTo(centerX+controlRectWidth/2,centerY+height/2,
centerX+controlRectWidth/2,centerY-height/2,
centerX,centerY-height/2);

c.fillStyle=”#8ED6FF”;
c.fill();
c.lineWidth=5;
c.strokeStyle=”black”;
c.stroke();
c.closePath();
}

</script>
</head>
<body onload=”drawOval()”>
<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
</body>
</html>

HTML 5 Canvas Semicircle Tutorial [Basic]

Untuk dapat membuat Kanvas setengah lingkaran pada HTML 5, kita dapat menggunakan Method arc dan mendefinisikan sudut akhir sebagai startingAngle + PI.

Untuk lebih jelasnya, berikut Susunan Methodnya:

c.arc(centerX,centerY,radius,startingAngle,
startingAngle + Math.PI,antiClockwise);

Dan berikut Scriptnya:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[]]></b:skin>
<script>

function drawSemicircle() {
var canvas=document.getElementById(“myCanvas”);
var c=canvas.getContext(“2d”);

var centerX = 288;
var centerY = 75;
var radius = 70;
var lineWidth = 5;

c.arc(centerX,centerY,radius,0, Math.PI,false);
c.lineWidth=lineWidth;
c.fillStyle=”#8ED6FF”;
c.fill();

c.moveTo(centerX – radius – lineWidth/2, centerY);
c.lineTo(centerX + radius + lineWidth/2, centerY);
c.strokeStyle=”black”;
c.stroke();
}

</script>
</head>
<body onload=”drawSemicircle()”>
<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
</body>
</html>

Pada Halaman Home, kami menampilkan tentang Blackberry sendiri beserta sejarah dan produk unggulan Blackberry itu sendiri.

Pada halaman About us, kami menampilkan bermacam promosi kami untuk memasarkan Website kami sendiri.

Pada halaman Locations, kami menampilkan detail lokasi toko kami beseta petanya.

Pada halaman Photo archive, kami menampilkan berbagai macam bentuk dan type Blackberry beserta harganya.

Pada halaman form reserved, terdapat form yang harus di isi oleh pembeli, form ini hanya khusus pembeli.

Setelah itu akan keluar form kirim, disitu anda di suruh memilih apakah mau pesan kembali atau keluar.

sumber:http://rossydian.wordpress.com/2012/08/08/makalah-tutorial-html5/

semoga bermafaat bagi kita semua
terima kasih

Author Description

Retronal

HTML 5 Canvas Path Tutorial [Basic]

HTML 5 Canvas Image Tutorial [Basic]

HTML 5 Canvas Text Tutorial [Basic]

HTML 5 Canvas Radial Gradient Tutorial [Basic]

HTML 5 Canvas Oval Tutorial [Basic]

HTML 5 Canvas Semicircle Tutorial [Basic]

Unknown

No comments:

Post a Comment

Total Pageviews

Labels

About Me

Labels

Contact Form

Author Description

Author Social Links

Retronal

HTML 5 Canvas Path Tutorial [Basic]

HTML 5 Canvas Image Tutorial [Basic]

HTML 5 Canvas Text Tutorial [Basic]

HTML 5 Canvas Radial Gradient Tutorial [Basic]

HTML 5 Canvas Oval Tutorial [Basic]

HTML 5 Canvas Semicircle Tutorial [Basic]

Unknown

No comments:

Post a Comment

Bottom Ad [Post Page]

Total Pageviews

Labels

About Me

Labels

Contact Form