Mengenal Tag HTML

Apapun pendapat anda, pengalihan aplikasi Flash ke HTML5 (ActionScript to JavaScript) menjadi tren saat ini. Mengapa?

Dukungan browser meningkat sangat cepat pada enam bulan terakhir sehingga kinerja “canvas” pada HTML5 makin dapat diandalkan.
Adobe meninggalkan peran flash pada perangkat dan lebih fokus pada pengembangan piranti Html5.
HTML5 dapat dijalankan hampir pada seluruh “platform”.
Apakah Flash akan mati?
Saya sebenarnya tidak tahu, karena dunia terus berubah dan teknologi dapat digantikan dengan yang lebih baik, sebagaimana hilangnya pager dengan hadirnya telepon selular. Tapi masih ada beberapa alasan yang membuat saya yakin flash belum tergantikan:

  • HTML5 dan Flash memiliki keunggulan dan keterbatasan yang berbeda. Perbedaan tersebut membuat flash lebih unggul untuk mengembangkan aplikasi komersil/bisnis sedangkan HTML5 lebih efektif untuk menjangkau sasaran pengguna.
  • Flash terkompilasi sebelum didistribusikansehingga lebih sulit bagi pengguna untuk membongkar kode programnya, kecuali bagi mereka yang memang biasa melakukan “software reverse engineering”.
  • Flash menawarkan bahasa pemrogramman yang lebih ketat (strict) sehingga unggul dalam menerapkan konsep OOP (Object Oriented Programming) dengan fitur class, static, public, private dan kompilasinya. Sementara itu, JavaScript pada HTML5 masih dalam perjalanan menuju ke sana. Meskipun demikian, JavaScript sangat efektif untuk menerapkan konsep “Functional Programming”.
  • Konvensi HTML5 lebih mengutamakan keamanan pengguna (user’s security), yang tentunya mengurangi keleluasaan dalam mengembangkan aplikasi komersil atau bisnis, sementara Flash masih membuka peluang untuk itu. Salah satu contohnya adalah kemampuan mengakses data lokal (local storage).

Dalam dunia tiga dimensi (3D), posisi pada saat ini dalam pandangan saya sebagai berikut:
HTML5 mendukung WebGL untuk aplikasi 3D pada PC dan OpenGL-ES untuk perangkat selular atau “mobile”. Masalahnya adalah, belum cukup banyak pengguna perangkat yang mendukung WebGL atau OpenGL-ES.
Flash memiliki keunggulan tersendiri dengan kemampuannya beradaptasi terhadap kemampuan perangkat. Pada GoogleChrome atau InternetExplorer misalnya, Flash memanfaatkan DirectX sedang pada perangkat lain secara otomatis memanfaatkan OpenGL. Bahkan ketika perangkat kita tidak dapat menggunakan GPU (graphics processing unit / graphics card), flash menjalankan “software render” sendiri, meski jauh lebih lambat.

Flash(Adobe)-Air merupakan teknologi pengembangan Flash yang memungkinkan kita lebih leluasa mengakses data lokal selayaknya aplikasi “desktop”. Teknologi inilah yang menjadi andalah Adobe di masa depan untuk tetap eksis baik pada PC maupun perangkat “mobile”. Teknologi ini tidak akan dikembangkan oleh HTML karena HTML berangkat dengan salah satu tujuan utama “perlindungan maksimal pengguna”.

Jadi,… menurut pendapat saya, sebagian peran Flash di browser (internet) akan digantikan oleh Html5 untuk aplikasi yang bersifat umum. Untuk aplikasi komersil/bisnis yang memerlukan akses lokal atau tujuan aplikasi tertentu Flex/Flash masih diperlukan. Nasibnya mungkin hampir sama dengan Java.
Masa Depan Java Script
Saya percaya, bahwa pada tahap awal perkembangannya, HTML5, khususnya dalam scripting akan didominasi oleh Flash atau Java Programmer, karena pengalaman mereka sangat bermanfaat untuk mengembangkan aplikasi JavaScript pada HTML5. Terutama yang berkaitan dengan pemanfaatan canvas dan animasi. Hal tersebut tentunya akan mempengaruhi arah perkembangan JavaScript, sehingga saya yakin, JavaScript akan menjadi lebih mirip ActionScript pada beberapa tahun mendatang. Bahkan bukan hal yang mustahil bila ActionScript akan menjadi alternatif JavaScript, ketika browsers mulai mendukung atau lahir plugin-plugin dari para Flash Programmer.
Saat Ini

Sebagai pecinta Flash selama sekian tahun, saya tetap tidak dapat menunggu evolusi HTML5 untuk dapat mengadopsi ActionScript, oleh karena itu, mempelajari HTML5 dan implementasi JavaScript-nya menjadi keharusan.

Sayang sekali, kecenderungan pemanfaatan JavaScript didominasi oleh para pengembang aplikasi yang gemar memanfaatkan platforms tanpa mengenali hubungan dengan kebutuhannya. Hal tersebut membuat halaman situs menjadi berat dan rumit. Mereka menggabungkan banyak platform hanya untuk memperoleh hasil sederhana.

Saya menyarankan kita memahami terlebih dahulu cara memanfaatkan JavaScript yang efisien sehingga kita tahu persis kapan memanfaatkan platforms dan bagaimana membuat pemanfaatan tersebut efektif dan efisien.

Untuk tujuan tersebut rangkaian artikel ini ditulis. Alasan itu pulalah yang membuat artikel awal ini tidak membahas Jquerry dan platform-platform lainnya, meskipun mempelajari Jquerry menurut saya wajib. Semoga Indonesia memiliki banyak programmer kelas dunia.

ANIMASI DAN POSISI TAG

Hal yang menarik dari HTML 5 adalah fitur untuk membuat animasi pada:

  • hampir setiap tag halaman situs
  • canvas dengan contect 2D maupun 3D
  • keleluasaan mengembangkan aplikasi klien melalui JavaScript

Anda mungkin terpesona dengan popup, animasi text, gambar dan kemampuan intraktif lainnya, hingga hame 3D pada HTML 5. Hal tersebut bukanlah keajaiban dan tidak pula sulit untuk dipelajari. Namun demikian saya ingin mengajak anda belajar dengan cara yang lebih benar, yaitu memahami dan mencoba konsep-konsep dasarnya sehingga ketika anda menemukan masalah dikemudian hari, mampu mengatasinya.

Hampir setiap Tag yang ada di HTML5 akan dapat ditempatkan pada bagian manapun di halaman situs dan dapat tumpang tindih. Anda dapat secara fleksibel mngubah posisi dan susunannya. Hal tersebut memungkinkan anda membuat animasi.

HTML5 memungkinkan kita membuat animasi atas hampir seluruh tag. Ada dua cara yang dapat dilakukan:

1. Memanfaatkan platform web-kit atau moz dengan mengatur CSS.

2. Memanfaatkan JavaScript secara langsung.

Konsisten dengan tujuan ini, kita membahas cara yang kedua. Saya yakin anda akan terkejut karena hanya memerlukan sedikit penjelasan:

• Pastikan tag’s position = “absolute”;

• Letakkan atau gerakkan posisi tag dengan mengatur property “top” dan “left”, bukan x dan y seperti pada bahasa pemrograman umumnya.

Contohnya sebagai berikut:

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Moving Div</title>

</head>

<body>

<script type=”text/javascript”>

var xx = 0;

var yy = 0;

var o;

function start()

{

return setInterval(step, 2);

}

function step(e)

{

if (!o) o = document.getElementById(“mydiv”);

if (o)

{

xx += 2;

if (xx > 300) xx = 0;

o.style.top = 0 + “px”;

o.style.left = xx + “px”;

}

else

{

alert(“mydiv not exist”);

}

}

document.onload = start();

</script>

<div>

Example moving an elemen. This time is a div.

</div>

<div id=”mydiv” style=”position:absolute; display:block;”>

<img src=”wood.png”/>

</div>

</body>

</html>

Penjelasan:

Pada contoh di atas kite tempatkan JavaScript pada awal “body” dan dalam “body” terdapat tag Image(<img>) dalam tag “div” yang kita beri id “mydiv”.  Perhatikan “style” pada tag “div” tersebut:

style=”position:absolute; display:block;”>

·         Posisi harus “absolute” artinya tidak dipengaruhi oleh posisi tag lainnya.

·         Display “block” jika tampak (visible) atau “none” untuk menyembunyikannya.

Script memiliki funksi start() yang akan dijalankan ketika <body> atau “document” terunduh (loaded). Hal tersebut terjadi secara otomatis karena kita menempatkan JavaScript pada “body”. Mengenai penempatan JavaScript akan kita bahas kemudian.

Funksi “start” mengembalikan nilai berupa fungsi untuk mengatur “timer” dengan parameter fungsi yang dijalankan saat pada waktu tertentu, yaitu fungsi step. Parameter kedua pada setTimer adalah waktu jedah (delay time) .

·         Variabel “o” kita tetapkan untuk menampung tag “mydiv”.

·         “mydiv” dapat dipanggil melalui JavaScript dengan menjalankan perintah:

o = document.getElementById(“mydiv”);

·         Animasi terjadi dengan menetapkan posisi “top” dan “left” tag “mydiv” sebagaimana contoh di atas:

o.style.top = 0 + “px”;

o.style.left = xx + “px”;

·         “px” perlu ditambahkan untuk memastikan nilai tersebut dalam satuan pixel.

Mudah bukan ?!.

Now you can see “not much difference”.

Penempatan Java Script

Halaman situs memeliki tiga bagian utama, yaitu:

  • Header -> <header></header>
  • Body -> <body></body>
  • Footer -> <footer></footer>

Footer merupakan bagian opsional yang dapat anda manfaatkan atau tidak.

Penempatan JavaScript pada header atau footer akan memberikan hasil yang berbeda.

  • Penempatan pada “header” akan mencakup script sebagai bagian dari halaman situs dan dapat digunakan di bagian lainnya. Permasalahannya, pemuatan tersebut terjadi sebelum isi halaman pada body terunduh, dengan demikian isi script tidak akan dijalankan bila berkaitan dengan bagian yang belum terunduh.
  • Penempatan di awal “body” juga dapat mengakibatkan permasalahan yang sama.

Pada contoh html di atas, “script” ditempatkan pada awal “body”, yang artinnya sebelum tag lainnya terunduk. Script tersebut masih dapat berjalan karena memanfaatkan “event” “document.onload”, yaitu memerintahkan halaman situs (document) untuk menjalankan fungsi yang ada pada “script” ketika dokumen terunduh.

Dengan cara tersebut ada permasalahan kedua: “ketika fungsi step() dijalankan, tag yang diperlukan (div) belum didefinisikan”. Mengapa tidak ditempakan pada fungsi start?. Karena ketika start() dipanggin kita tidak tahu pasti apakah “mydiv” telah terunduh.

Tidak tersebut tidak diperlukan bilamana script ditempatkan pada bagian bawah “body”. Cukup dengan memanggil fungsi start().

Untuk mencobanya, “copy: html diatas pada suatu file dan beri nama [terserahanda].html. Jangan lupa mengunduh pula image :

Demikian untuk kali ini, silahkan bereksperimen dengan hal di ats sebelum mempelajari canvas.

 

Leave a comment