MAKALAH

HTML5

KURIKULUM DAN TEKNOLOGI PENDIDIKAN

Oleh: MASRUHIL

NIM: 1102412037

UNIVERSITAS NEGERI SEMARANG

TAHUN 2013

BAB 1

PENDAHULUAN

A. Latar Belakang Masalah

Kebutuhan akan informasi di dunia maya membuat para developer website

berlomba-lomba menyajikan berbagai macam layanan sehingga para pengguna

akan betah berkunjung ke dalam websitenya. Dari masa-masa ke masa teknologi

website mengalami perkembangan yang begitu pesatnya dan kini bahkan

memberalihkan aplikasi dektop yang selama ini kita kenal menjadi aplikasi

berbasis web.

Banyak aplikasi yang selama ini hanya sebatas akses di komputer dan harus

diinstal terlebih dahulu, kini aplikasi website memberikan ruang pada kita untuk

mencicipi aplikasi misalnya game online, sehingga tidak perlu lagi yang namanya

instalasi kita cuma butuh yang namanya koneksi internet.

B. Rumusan Masalah

Berdasarkan judul Web Development Admin maka rumusan masalah yang dapat

saya temukan adalah :

1. Apa yang di maksud dengan website ?

2. Unsur unsur yang ada dalam website ?

3. Bagaimana Pemeliharaan website?

4. Perpanjangan masa sewa domain name dan web hosting.

5. Apa itu Web Depeloper?

6. Html 5 Menjadi Solusi Para Web Development

7. Apa yang dimaksud Cms Based Web Developmet?

8. Web administrator

9. bagaimana Seri HTML5 Untuk Aplikasi Mobile ?

10. bagaimana untuk Membangun Area Kerja HTML5 Untuk Aplikasi Mobile ?

 

 

 

BAB II

ISI

1.1. PENGERTIAN WEBSITE ATAU SITUS

Website atau situs dapat diartikan sebagai kumpulan halaman yang

menampilkan informasi data teks, data gambar diam atau gerak, data animasi,

suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun

dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana

masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink).

Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi

informasinya searah hanya dari pemilik website. Bersifat dinamis apabila isi

informasi website selalu berubah-ubah, dan isi informasinya interaktif dua arah

berasal dari pemilik serta pengguna website. Contoh website statis adalah berisi

profil perusahaan, sedangkan website dinamis adalah seperti Friendster, Multiply,

dll. Dalam sisi pengembangannya, website statis hanya bisa diupdate oleh

pemiliknya saja, sedangkan website dinamis bisa diupdate oleh pengguna maupun

pemilik.

1.2. UNSUR-UNSUR DALAM PENYEDIAAN WEBSITE ATAU SITUS

Untuk menyediakan sebuah website, maka harus tersedia unsur-unsur

penunjangnya, adalah sebagai berikut:

 

1. Nama domain ( Domain name/URL – Uniform Resource Locator )

Nama domain atau biasa disebut dengan Domain Name atau URL adalah

alamat unik di dunia internet yang digunakan untuk mengidentifikasi sebuah

website, atau dengan kata lain domain name adalah alamat yang digunakan untuk

menemukan sebuah website pada dunia internet. Contoh :http://www.bsi.ac.id .

Nama domain diperjual belikan secara bebas di internet dengan status sewa

tahunan. Setelah Nama Domain itu terbeli di salah satu penyedia jasa pendaftaran,

maka pengguna disediakan sebuah kontrol panel untuk administrasinya. Jika

pengguna lupa/tidak memperpanjang masa sewanya, maka nama domain itu akan

di lepas lagi ketersediaannya untuk umum. Nama domain sendiri mempunyai

identifikasi ekstensi/akhiran sesuai dengan kepentingan dan lokasi keberadaan

website tersebut. Contoh nama domain ber-ekstensi internasional adalah com, net,

org, info, biz, name, ws. Contoh nama domain ber-ekstensi lokasi Negara

Indonesia adalah :

- .co.id : Untuk Badan Usaha yang mempunyai badan hukum sah

- .ac.id : Untuk Lembaga Pendidikan

- .go.id : Khusus untuk Lembaga Pemerintahan Republik Indonesia

- .mil.id : Khusus untuk Lembaga Militer Republik Indonesia

- .or.id : Untuk segala macam organisasi yand tidak termasuk dalam kategori

“ac.id”,”co.id”,”go.id”,”mil.id” dan lain lain

- .war.net.id : untuk industri warung internet di Indonesia

- .sch.id : khusus untuk Lembaga Pendidikan yang menyelenggarakan pendidikan

seperti

SD, SMP dan atau SMU

- .web.id : Ditujukan bagi badan usaha, organisasi ataupun perseorangan yang

melakukan

kegiatannya di World Wide Web.

 

2. Rumah tempat website (Web hosting)

Web Hosting dapat diartikan sebagai ruangan yang terdapat dalam harddisk

tempat menyimpan berbagai data, file-file, gambar, video, data email, statistik,

database dan lain sebagainya yang akan ditampilkan di website. Besarnya data

yang bisa dimasukkan tergantung dari besarnya web hosting yang disewa/dipunyai,

semakin besar web hosting semakin besar pula data yang dapat dimasukkan dan

ditampilkan dalam website.

Web Hosting juga diperoleh dengan menyewa. Pengguna akan memperoleh

kontrol panel yang terproteksi dengan username dan password untuk administrasi

websitenya. Besarnya hosting ditentukan ruangan harddisk dengan ukuran MB

(Mega Byte) atau GB (Giga Byte). Lama penyewaan web hosting rata-rata

dihitung per tahun. Penyewaan hosting dilakukan dari perusahaan-perusahaan

penyewa web hosting yang banyak dijumpai baik di Indonesia maupun Luar

Negeri. Lokasi peletakan pusat data (datacenter) web hosting bermacam-macam.

Ada yang di Jakarta, Singapore, Inggris, Amerika, dll dengan harga sewa

bervariasi.

3. Bahasa Program (Scripts Program)

Adalah bahasa yang digunakan untuk menerjemahkan setiap perintah dalam

website yang pada saat diakses. Jenis bahasa program sangat menentukan statis,

dinamis atau interaktifnya sebuah website. Semakin banyak ragam bahasa program

yang digunakan maka akan terlihat website semakin dinamis, dan interaktif serta

terlihat bagus.Beragam bahasa program saat ini telah hadir untuk mendukung

kualitas website. Jenis jenis bahasa program yang banyak dipakai para desainer

website antara lain HTML, ASP, PHP, JSP, Java Scripts, Java applets, XML, Ajax

dsb. Bahasa dasar yang dipakai setiap situs adalah HTML sedangkan PHP, ASP,

JSP dan lainnya merupakan bahasa pendukung yang bertindak sebagai pengatur

dinamis, dan interaktifnya situs. Bahasa program ASP, PHP, JSP atau lainnya bisa

dibuat sendiri. Bahasa program ini biasanya digunakan untuk membangun portal

berita, artikel, forum diskusi, buku tamu, anggota organisasi, email, mailing list

dan lain sebagainya yang memerlukan update setiap saat.

4. Desain website

Setelah melakukan penyewaan domain name dan web hosting serta penguasaan

bahasa program (scripts program), unsur website yang penting dan utama adalah

desain. Desain website menentukan kualitas dan keindahan sebuah website. Desain

sangat berpengaruh kepada penilaian pengunjung akan bagus tidaknya sebuah

website. Untuk membuat website biasanya dapat dilakukan sendiri atau menyewa

jasa website designer. Saat ini sangat banyak jasa web designer, terutama di kota-

kota besar. Perlu diketahui bahwa kualitas situs sangat ditentukan oleh kualitas

designer. Semakin banyak penguasaan web designer tentang beragam

program/software pendukung pembuatan situs maka akan dihasilkan situs yang

semakin berkualitas, demikian pula sebaliknya. Jasa web designer ini yang

umumnya memerlukan biaya yang tertinggi dari seluruh biaya pembangunan situs

dan semuanya itu tergantung kualitas designer. Program-program desain website

salah satunya adalah Macromedia Firework, Adobe Photoshop, Adobe

Dreamweaver, Microsoft Frontpage, dll

5. Program transfer data ke pusat data

Para web designer mengerjakan website dikomputernya sendiri. Berbagai

bahasa program, data informasi teks, gambar, video, dan suara telah menjadi file-

file pendukung adanya website. File tersebut bisa dibuka menggunakan program

penjelajah (browser) sehingga terlihatlah sebuah website utuh di dalam komputer

sendiri (offline). Tetapi file-file tersebut perlu untuk diletakkan dirumah hosting

versi online agar terakses ke seluruh dunia. Pengguna akan diberikan akses FTP

(File Transfer Protocol) setelah memesan sebuah web hosting untuk memindahkan

file-file website ke pusat data web hosting. Untuk dapat menggunakan FTP

diperlukan sebuah program FTP, misalnya WS FTP, Smart FTP, Cute FTP, dll.

Program FTP ini banyak ditemui di internet dengan status penggunaan gratis

maupun harus membayar. Para web designer pun dapat menggunakan fasilitas FTP

yang terintegrasi dengan program pembuat website, misal Adobe Dreamweaver.

6. Publikasi website

Keberadaan website tidak ada gunanya dibangun tanpa dikunjungi atau dikenal

oleh masyarakat atau pengunjung internet. Karena efektif tidaknya situs sangat

tergantung dari besarnya pengunjung dan komentar yang masuk. Untuk

mengenalkan situs kepada masyarakat memerlukan apa yang disebut publikasi atau

promosi. Publikasi situs di masyarakat dapat dilakukan dengan berbagai cara

seperti dengan pamlet-pamlet, selebaran, baliho, kartu nama dan lain sebagainya

tapi cara ini bisa dikatakan masih kurang efektif dan sangat terbatas. Cara yang

biasanya dilakukan dan paling efektif dengan tak terbatas ruang atau waktu adalah

publikasi langsung di internet melalui search engine-search engine (mesin pencari,

spt : Yahoo, Google, MSN, Search Indonesia, dsb)

Cara publikasi di search engine ada yang gratis dan ada pula yang membayar.

Yang gratis biasanya terbatas dan cukup lama untuk bisa masuk dan dikenali di

search engine terkenal seperti Yahoo atau Google. Cara efektif publikasi adalah

dengan membayar, walaupun harus sedikit mengeluarkan akan tetapi situs cepat

masuk ke search engine dan dikenal oleh pengunjung.

1.3. PEMELIHARAAN WEBSITE.

Untuk mendukung kelanjutan dari situs diperlukan pemeliharaan setiap waktu

sesuai yang diinginkan seperti penambahan informasi, berita, artikel, link, gambar

atau lain sebagainya. Tanpa pemeliharaan yang baik situs akan terkesan

membosankan atau monoton juga akan segera ditinggal pengunjung. Pemeliharaan

situs dapat dilakukan per periode tertentu seperti tiap hari, tiap minggu atau tiap

bulan sekali secara rutin atau secara periodik saja tergantung kebutuhan (tidak

rutin). Pemeliharaan rutin biasanya dipakai oleh situs-situs berita, penyedia artikel,

organisasi atau lembaga pemerintah. Sedangkan pemeliharaan periodik bisanya

untuk situs-situs pribadi, penjualan/e-commerce, dan lain sebagainya.

1.4. PERPANJANGAN MASA SEWA DOMAIN NAME DAN WEB

HOSTING.

Perlu dipahami bahwa domain name dan web hosting berstatus sewa. Selama

kedua hal itu dibayarkan masa sewa perpanjangannya, maka Anda berhak untuk

memilikinya dan mempergunakannya. Banyak terjadi kasus kelupaan dalam

memperpanjang masa sewanya, atau sulit untuk menghubungi pihak ketiga (web

designer) sebagai perantara pendaftaran awal, maka akan berakibat fatal. Anda

akan kehilangan domain name sebagai identitas dalam dunia internet. Pastikan

Anda mengingat untuk memperpanjang masa sewanya. Arti penting domain name

perlu Anda pahami.

1.5.WEB DEVELOPER

Web developer adalah seseorang yang menciptakan aplikasi berbasis web

dengan menggunakan bahasa pemrograman. Pada dasarnya, web developer

membuat berbagai hal “terjadi” pada sebuah website. Peran web developer adalah

sebagai penghubung dari semua sumber daya yang akan digunakan pada sebuah

website, mulai dari pemanggilan database, membuat halaman website yang

dinamis, hingga mengatur cara pengunjung untuk berinteraksi dengan elemen-

elemen dari website tersebut.

Seorang web developer yang handal akan terbiasa dengan bahasa pemrograman,

baik itu di sisi server ( server-side scripting ) maupun disisi client ( client-side

scripting ). Dan jangan lupa dengan aspek database yang akan digunakan.   

Berikut adalah bagian aplikasi yang harus dipahami oleh seorang web developer :

Client-side: JavaScript.

Server side: ASP, ASP.NET, Java, Perl, PHP, Python, Ruby, dsb.

Databases: MySQL, Oracle, dsb

Aspek tampilan menjadi sisi yang agak “terpinggirkan” oleh web developer.

Pada umumnya setelah scripting dari aplikasi web telah selesai dibuat, web

developer akan menyerahkan pekerjaannya kepada web designer untuk

menciptakan tampilan yang baik.

1.6. HTML 5 MENJADI SOLUSI PARA WEB DEVELOPMENT

Tidak lepas yang namanya script/tag HTML (Hypertext Markup Language).

Bagi para web development mungkin sudah familiar yang namanya HTML ini

karena untuk membangun website yang dinamis para web development harus

memahami konsep- konsep dasar dari HTML. Banyak orang bilang HTML itu

bahasa yang mudah sederhana dan struktur dan sering pula di anggap remeh karena

kemampuan HTML itu sendiri, jauh di bawah Java Script (client side) apalagi di

bantingkan dengan script server side seperti PHP, ASP, ASPX, dan bahasa lain

sebagainya.

Mengabaikan pemahaman tentang membanding-bandingkan HTML dengan

yang lain, perlu di ketahui HTML merupakan dokument standar yang di akses

dengan menggunakan HTTP (Hypertext Tranfer Protocol) sebagai protokol yang

berfungsi mengirimkan data dari web server ke web broser pada sisi klient.

Awal pertama di perkenalkan yang namanya HTML ini sekita tahun 1991 yang

hanya mencakup 22 elemen dan kemudian di lanjutkan dengan HTML +, maka di

dalam perkembangan HTML tidak di kenal yang namanya HTML1. Dan pada

tahun 1995 barulah kemudian di perkenalkan yang namanya HTML 2.0.

Pada perkembangannya HTML 2.0 kemudian oleh W3C (Word Wide Web

Consortium) sebuah organisasi menentukan standar internasional word Wide Web

pada tahun 1997 memperkenalkan HTML 3.2 yang memiliki banyak fitur

tambahan seperti table, applet, superscript, sub script dan marque.

Pada tahun 1997 akhir, baru kemudian HTML 4.0 secara resmi di umumkan

dan kemudian pada tahun 1999 dilanjutkan dengan HML 4.1. Pada perkembangan

sekarang mungkin sebagian orang masih merasakan yang namanya HTML 4

adalah kemampuan design web yaitu dengan menggunakan css (Cascading Style

Sheets) . CSS ini memberikan kemuduhan dalam memberikan tampilan yang

terbaik pada browser-browser Anda.

Pada tahun Januari 2008, HTML 5 diumkan sebagai draft, walaupun belum di

rekomentasikan secara resmi, beberapa sfesifikasi HTML 5 mulai di dukung oleh

berbagai macam layout dan engine. Pada perkembangannya HTML 5 ini ada

beberapa penambahan “tag” baru yang hanya dapat dimengerti oleh browser-

browser baru. Tag tersebut diantaranya “section, article, footer, audio, video,

progress, nav, meter, time, aside, canvas serta datagrid“.

Tag-tag tersebut hanya dikenali oleh browser-browser keluaran terbaru, sebagai

misal Firefox 3.5, Opera 9.6, Chrome, Safari, IE 8. Nah bagaimana dengan

browser- browser lama seperti IE6, Firefox 1.5. Maaf browser-browser tersebut

belum mendukung tag-tag baru di HTML 5.

A. Kelebihan Dan Kekurangan HTML 5

Beberapa kelebihan yang dijanjikan pada HTML 5:

Dapat ditulis dalam sintaks HTML (dengan tipe media text/html) dan XML.

Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.

Integrasi (’inline’) MathML dan SVG dengan doctype yang lebih sederhana.

Penulisan kode yang lebih efisien.

Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga

istilah ‘deprecated’ tidak akan diperlukan lagi.

 

Yang masih diperdebatkan dalam pengembangan HTML 5:

Makna semantik beberapa elemen presentasioal.

Fitur aksesibilitasnya. Seperti atribut alt dan summary

 

B. Teknologi yang dipakai HTML5

API (Aplication Programming Interface) merupakan teknologi yang akan di usung

oleh

HTML5, berikut ini adalah batasan-batasannya :

1. Offline Data Storage

Memungkinkan kita bisa mengakses data lama di broser dalam keadaan offline.

Contoh

offline data seperti kita membaca arsip e-mail pada program Outlook atau

Thunderbird.

2. Drag and Drop

Drag and Drop ini kita dapat dengan memudahkan mendrag atau mendrop

misalnya text,

hyperlink, bahkan file di aplikasi dekstop sekalipun.

3. Geolocation

Aplikasi ini memungkinkan kita untuk untuk mengetahui lokasi geografis,

sumber informasi di ambil dari GPS (Global Position System).Masih terdapat

banyak API lainya dan terus di kembangkan. Dalam implementasinya, Anda akan

memerlukan pemrogramanan Java Script untuk menjembatani penggunaan API ini.

 

C. Elemen Baru di HTML 5

Demi mewujudkan struktur halaman web yang lebih baik semantik dan

aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:

section serupa seperti h1-h6.

article bisa berupa entri blog atau tulisan konten.

aside menyajikan konten pelengkap.

header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.

footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan

sebagainya.

dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ)

dapat digunakan untuk menyajikan percakapan.

yang fenomenal adalah penggunaan elemen figure, video, audio, source,

embed, canvas, dan elemen terkait berkas multimedia lainnya.

 

1. Atribut baru di HTML 5

Dikenalkan pula beberapa atribut baru, seperti:

atribut media, ping pada elemen pranala,

autofocus, placeholder, required, autocomplete, dan sebagainya, terkait

elemen input dan form,

reversed pada elemen ol untuk urutan besar ke kecil.

2. Perubahan makna elemen

Ada beberapa elemen yang berubah makna, diantaranya:

Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang

ingin

ditonjolkan, tidak ‘deprecated’ (bukan fitur yang dianggap usang). Tidak

lebih

dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku

pula

untuk elemen i.

Elemen strong menegaskan level kepentingan, bukan sekadar penekanan

emphasis lagi.

Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok

pikirannya.

dan lain-lain.

 

3. Elemen dan atribut yang tidak digunakan

Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML 5:

center,

font,

strike, u, big,

frame, frameset, noframes,

acronym,

longdesc,

scope pada td,

dan sebagainya.

Sulit di pungkiri kehadiran HTML 5 akan menggerakkan banyak hal, browser-

browser beradaptasi untuk mendukungnnya, berbagai CMS mengarahkan

developementnya untuk ikut mengiplementasikan yang pada akhirnya pera

pemakai internet di paksa untuk menggeser kebiasaan lama menjadi kebiasaan tren

baru. Tetapi pada prinsipnya yang berubah hanyalah tool dan caranya. Semoga

penjelasan mengenai HTML 5 ini merealisasikan pengetahuan Anda untuk

memejukan web development ke depan.

1.7.CMS BASED WEB DEVELOPMET

Dalam dunia maya pada umumnya teknik ini sering disebut CMS (Content

Management System).

CMS merupakan mesin atau aplikasi di sisi server web. CMS dibuat sangat praktis

dan memudahkan client dalam penggunaan, pengelolaan, dan pengaturan isi atau

content website. CMS in sudah dilengkapi dengan Database dan beberapa

aplikasiyang bisa dipilih untuk di integrasikan ke dalam situs anda.

Dengan CMS client tidak perlu repot-repot membuat kode-kode pemrograman

yang rumit. Client dimanjakan dengan segala kemudahan yang disajikan oleh

CMS. Administrator/Webmaster hanya perlu pengetahuan tentang Internet, dengan

mengikuti panduan yang akan diberikan sebelum website diserah-terimakan maka

akan sangat mudah untuk melakukan update (add, edit, delete) content website.

Dengan mimilih salah satu paket yang kami pakai ini, anda tidak perlu

membayar dengan harga yang mahal untuk mendapatkan dan mempunyai sebuah

situs. Sangat murah. iya.. karena metode ini menjadi salah satu solusi dalam

pembuatan website.Kami sangat berpengalaman dalam melakukan kastemis CMS.

Selama kurang lebih 3 tahun kami sudah memakai CMS sebagai backend dari

setiap website yang kami bangun Kami memiliki pemahanan dan kemampuan

untuk melakukan penyesuaian dengan hampir segala kebutuhan client akan

websitenya, dibantu oleh seluruh komunitas pengembang dari masing-masing

Open Source CMS.

1.8.WEB ADMINISTRATOR

Web Asministrator adalah orang yang bertanggung jawab atas jalannya sebuah

website

dan bertugas untuk mengawasi perkembangan website

1.9. Seri HTML5 Untuk Aplikasi Mobile 

Sekian lama saya tidak lagi menggarap tulisan untuk tutorial programming.

Yah, memang karena secara tidak sengaja ada beberapa permasalahan internal dan

eksternal. Salah satunya adalah musibah yang menimpa server situs ini. Sewaktu

itu ada permasalahan di server dan berita buruknya saya tidak membackup update

situs terbaru

Oke, lupakan. Saat ini saya memang sedang fokus ke sebuah teknologi yang

bernama HTML5 for Mobile Applications. Tidak muluk-muluk dan terlalu sulit

sebenarnya. Ini merupakan seri pertama dari tutorial step-by-step saya. Jika

pembaca sudah pernah atau bahkan berkecimpung di dunia web, mungkin tutorial

yang akan saya tulis beberapa seri ini mudah diikuti. Namun, jika pembaca ingin

memulai belajar atau bahkan baru mengenal HTML, tak ada salahnya mengikuti

tutorial yang akan saya rangkum nanti.

Baik, sesuai judul di atas, saya akan mulai membahas tentang HTML5. Sedikit saja

coba saya petik dari Wikipedia, HTML5 adalah revisi ke 5 dari HTML. Yakni

bahasa pemrograman yang digunakan untuk membuat struktur dan tampilan dari

isi web. Jadi konklusinya di sini, HTML5 adalah teknologi paling anyar dari

HTML dengan kelengkapan fitur dan tambahan penataan format baru untuk desain

web (red.).

Mengenai kelebihan HTML5, coba kita lihat di bawah ini:

For Gaming and Applications. Dengan elemen fitur baru bernama

<canvas>, fitur ini memungkinkan kita untuk menggambar 2D di area kerja

HTML. Dan masih banyak lagi sebenarnya yang bisa kita lakukan dengan

<canvas> ini.

Web Storage. Lupakan cache di browser, saat ini sudah banyak situs yang

memanfaatkan Web Storage di HTML5 untuk memaksimalkan beberapa fitur

untuk sebuah website. Web Storage memungkinkan browser menyimpan

secara dinamis data-data dari user yang mengakses situs.

Audio and Video. Percaya tidak percaya, jika kita ingin menyajikan suara

maupun video di website HTML5 sebenarnya bisa dilakukan dengan sangat

mudah. Dengan API (Application Programming Interface) yang dimiliki

HTML5, suara dan video dapat ditampilkan dengan menaruh sebuah elemen

di HTML5. Meski dengan tambahan Javascript, Overal ! its very easy for

beginners !

Performance. Pasti pernah kan membuka Google Apps? Baik itu Gmail,

Google Drive, maupun sejenisnya. Ternyata mereka menggunakan HTML5,

lihat performanya dan bandingkan dengan Gmail di beberapa tahun yang lalu

sebelum memakai HTML5. Pasti lebih powerful dan keren. 

Masih banyak lagi. Bisa pembaca cek di sini > Html5Rocks.

Nah, sebenarnya ada satu lagi kelebihan yang dimiliki HTML5

selain yang saya tulis di atas, yaitu Cross Platform. Dengan kata

lain semua browser dan semua device baik itu mobile maupun

desktop, sudah mendukung penggunaan HTML5. Untuk apa?

Pastinya untuk membangun sebuah aplikasi. Contoh saja Gmail

dan Google Apps lainnya yang dibangun menggunakan HTML5,

mereka merupakan sebuah aplikasi (asli) yang hanya bisa

dijalankan via browser. Sangat keren menurut saya.

Kemudian ada kabar gembira baru, HTML5 sekarang ini sudah bisa dipakai

untuk membangun aplikasi mobile, entah itu untuk platform Android, iOS, bahkan

BlackBerry. Its Awesome Guys ! Pernah membuat aplikasi Android? Pusing

dengan Java? C++ dan teman-temannya? Kalian sudah bisa HTML, kalian bisa

membuat aplikasi Android. Jika tidak percaya, Aplikasi yang saya buat bersama

teman-teman ini asli menggunakan HTML5. Cek di sini aplikasinya > Google

Play.

Untuk dapat membangun aplikasi mobile menggunakan HTML5, memang ada

beberapa tools tambahan yang harus kita pakai. Berikut adalah beberapa tools yang

bisa kita pakai untuk membangun aplikasi mobile dengan HTML5,

PHONEGAP (APPS)

SENCHA TOUCH (APPS)

COCOS2D JAVASCRIPT (GAMES)

COCOON JS, ETC. (GAMES)

CONSTRUCT 2 (GAMES)

Begitu banyaknya tools yang dapat kita pakai untuk membangun aplikasi

mobile dengan HTML5, sampai-sampai saya malas me-list dan menuliskan di sini.

Hehe, mungkin lain kali, di seri tutorial selanjutnya saya akan membahas dan

menerangkan secara lebih detail tentang HTML5 dan PhoneGap.

Membangun Area Kerja HTML5 Untuk Aplikasi Mobile

Untuk membangun aplikasi mobile dengan mudah

berbasis HTML5 dan Phonegap, tentunya kita juga harus membangun area kerja

yang pas untuk keperluan developing. Pada artikel sebelumnya, penulis sudah

menyarankan agar kita wajib mempunyai text editor pemrograman, aplikasi

Eclipse dan tentunya koneksi internet.

Dalam tutorial pemantapan kali ini, penulis akan melanjutkan secara lebih jelas

hal-hal apa saja yang harus dilakukan untuk membangun area kerja berbasis

HTML5. Hal yang diperlukan tersebut adalah sebagai berikut :

1. INSTALASI JAVA

Instalasi Java dimaksudkan untuk menjalankan aplikasi testing yang berbasis Java

dan memerlukan teknologi Java untuk menjalankannya. Java juga berfungsi

sebagai media kompilasi paket aplikasi Android.

Paket instalasi Java telah tersedia secara gratis di

website http://oracle.com/technetwork/java/javase/downloads/index.html

Untuk memastikan versi Java yang telah terinstal di komputer Windows, penulis

memanfaatkan aplikasi CMD Windows dengan menggunakan perintah CMD java

-version :

2. INSTALASI ANDROID SDK

Android SDK adalah salah satu tool yang diperlukan sebagai alat bantu dan API

untuk mengembangkan aplikasi pada platform Android. Penulis mendownload

secara langsung Android SDK dari situs http://developer.android.com secara

gratis alias tidak dipungut biaya.

LOKASI FOLDER ANDROID SDK

Paket Android SDK yang telah terdownload, dipindahkan ke dalam partisi C

sistem Windows 7. Folder Android di sistem C: ini berfungsi untuk menampung

file-file Android SDK.

3. INSTALASI ECLIPSE SDK VERSI TERBARU (DIPERKENANKAN

VERSI JUNO)

Eclipse di download langsung dari situs http: //www.eclipse.org/downloads dan

bersifat free. Eclipse versi Juno mempunyai banyak keunggulan dibanding versi-

versi sebelumnya. Salah satu keunggulannya adalah optimasi untuk kompilasi

Android menggunakan Android Development Tools (ADT).

ECLIPSE VERSI JUNO

Setelah melakukan serangkaian instalasi di atas kita masih diharuskan untuk

memasang beberapa tools maupun plugin agar PhoneGap dapat diimplementasikan

dengan baik ke dalam area kerja. Dalam tutorial berikutnya akan penulis lanjutkan

untuk pembahasan :

Instalasi ADT (Plugin Eclipse)

Instalasi MDS AppLaud (Plugin Eclipse)

Membuat AVD, dan

Membuat USB Debugging pada Samsung Galaxy

 

Quake II, Game 3D Yang Mengusung Teknologi HTML5

Teknologi HTML5 mempunyai masa depan yang sangat cerah. Terbukti

sampai sekarang ini, HTML5 telah dipakai oleh penyedia layanan online kelas atas

seperti Google, Yahoo, Facebook maupun Twitter. HTML5 menawarkan

kombinasi kecanggihan antara API dan browser yang sudah mengusung teknologi

hyper markup ini. Dengan API yang lengkap dan terus dikembangkan, HTML5

akan menjadi masa depan bagi dunia web, mobile, game 2D bahkan game 3D.

QUAKE II

Bukti bahwa HTML5 telah merambah ke dunia Game 3D adalah munculnya

Quake II. Quake II merupakan game yang dapat dimainkan melalui browser. Game

ini dibuat menggunakan WebGL dan juga Canvas API. WebGL 3D Graphic

menjadi engine utama untuk merender game Quake II pada browser-browser masa

kini seperti Google Chrome dan Safari. Sedangkan Canvas API dipakai sebagai

arena utama permainan yang tentunya menggunakan Javascript.

Berikut adalah fitur-fitur HTML5 yang dipakai untuk pengembangan game ini :

WebGL 3D Graphic

HTML5 Canvas Element

HTML5 WebSocket

HTML5 Audio Element

HTML5 Localstorage

Jika pembaca sedang berkecimpung di dunia pemrograman game berbasis

HTML5, Anda bisa mengunduh source code Quake II melaluicode.google.com.

Pembaca pun dapat mengikuti perkembangan bagaimana Quake II dibuat. Quake II

didukung sepenuhnya oleh para programmer Google.

Game yang bergenre First Person Shooter yang awalnya dikembangkan oleh

Activision ini mendapat 20% perhatian pengembangan oleh para Googlers

(programmer Google) untuk teknologi web browser masa depan. Anda bisa

melihat demo video Game Quake II HTML5 ini melalui video diatas. Sebagai info

Game ini mulai dikembangkan oleh Google pada tahun 2010 silam.

Pengembang juga menyarankan agar memakai Google Chrome atau Safari versi

terbaru untuk memainkan Game 3D ini. Pastikan juga spesifikasi komputer Anda

cukup mumpuni untuk merender WebGL. Silahkan mencoba Game ini melalui

quake2-gwt-port.appspot.com.

Catatan kaki: Dunia Game 3D yang identik dengan pemrograman desktop

sekarang mulai beralih dan perlahan-lahan merambah ke dunia web. Sebelumnya

jika kita sudah mengenal Flash Game yang dapat dimainkan melalui browser, saat

ini mulai muncul marak game-game 2 Dimensi yang diusung menggunakan

HTML5 dan Javascript Programming.

Mampukah HTML5 Menggantikan Mobile Native Apps?

Jika ingin membuat sebuah aplikasi untuk iPhone atau iPad maka Anda harus

develop dengan komputer Macintosh dan menggunakan bahasa Objective-C. Jika

ingin membuat aplikasi berbasis Android maka setidaknya harus memiliki dasar

Java dan paham bagaimana menggunakan API Android. Jadi seperti yang bisa

dilihat, ketika ingin membuat aplikasi yang sama untuk dua platform, kita harus

menulis code dua kali untuk dua platform itu.

HTML5 berjalan di Mobile

Itu sebabnya orang melihat HTML5 bisa menjadi alternatif menarik untuk

membuat aplikasi yang dapat dijalankan di semua platform. Write once, run

everywhere. HTML5 jika dipadukan dengan CSS3 dan JavaScript memang

terbukti bisa menghasilkan aplikasi yang sangat interaktif. Apalagi saat ini hampir

semua gadget ataupun komputer yang memiliki browser. Oleh karena itu, tidak

mengherankan apabila di Internet muncul berbagai artikel mengenai bagaimana

membuat aplikasi untuk iPhone ataupun Android dengan HTML. Sebagai

teknologi yang tergolong baru, menggunakan HTML5 untuk membuat aplikasi

untuk mobile menggantikan native app  bukanlah tanpa tantangan. Mari kita pilah-

pilah beberapa poin yang menjadi masalah:

1. Native App lebih cepat daripada HTML5

Pada dasarnya aplikasi native lebih cepat dikarenakan langsung dijalankan di

sistem, dibandingkan HTML5 yang masih harus transfer data dari server ke

perangkat tangan Anda.

2. Tampilan Native App lebih seirama dibandingkan HTML5

Biasanya tampilan aplikasi native lebih menyatu dengan perangkat daripada

aplikasi berbasis Web.

3. Masalah keamanan pada HTML5

Bagi pengguna yang mengerti pemograman dan sejenisnya, peluang untuk

mendobrak aplikasi HTML5 jauh lebih mudah dibandingkan aplikasi native.

Misalnya saja, aplikasi Angry Bird berbasis HTML5 dapat dengan mudah di-hack

untuk membuka semua level setelah beberapa jam di-launching.

4. HTML5 belum tentu bisa dijalankan di semua perangkat.

Walaupun dikatakan write once run everywhere, HTML5 tidak sepenuhnya

bisa dijalankan di mana-mana. Salah satu akibatnya adalah dukungan browser

sendiri yang belum tentu mendukung semua fitur dari HTML5, apalagi W3C

selaku badan yang membuat standar HTML5 menyatakan standar HTML5

mungkin baru akan rampung 2014.

5. HTML5 tidak efisien.

Aplikasi native cenderung lebih efisien dibandingkan HTML5 karena aplikasi

native dibuat hanya ditujukan untuk perangkat itu saja. Developer IPhone dapat

memaksimalkan segalanya supaya aplikasinya dapat berjalan sempurna di Iphone.

Berbeda dengan developer berbasis Web HTML5, dia harus memikirkan berbagai

kemungkinan yang pada ujungnya harus mengorbankan efisiensi.  Itulah secuil

kelemahan HTML5 dibandingkan native app. Tetapi walaupun hari ini HTML5

belum mencapai tahap rampung, bukan berarti native app bisa berjaya terus. Untuk

saat ini HTML5 masih memiliki kekurangan sana sini, tetapi perkembangannya

sangatlah cepat.

Dukungan HTML5 semakin hari akan semakin  membaik. Saat ini saja, kita

sudah mampu membuat aplikasi HTML5 berbasis sentuh yang dapat berjalan di

Web maupun di mobile. Google sendiri merilis JavaScript engine V8 yang telah

membuktikan mampu memproses JavaScript jauh lebih cepat. Serta saat ini sudah

terdapat App Store untuk aplikasi berbasis HTML5 yang bisa dipasang ke gadget

yang dinamakan openappmkt.com. Jadi, mungkin saja jika hari ini jika developer

lebih memilih develop native app daripada berbasis HTML5. Tetapi penulis yakin

dalam waktu beberapa tahun, dengan kecepatan perkembangannya seperti saat ini,

aplikasi berbasis HTML5 akan mulai menjadi pilihan favorit developer. Kita lihat

saja nantinya.

Seklias tentang Html5 vs Flash

    Sebagian besar video yang sedang diputar melalui browser hari ini adalah

dengan Flash plugin. Ini bekerja dengan cukup baik, tetapi sayangnya Flash

membutuhkan banyak daya komputasi kalo dikompi saya sendiri suka nge-hang

coz resource yang dipake gede banget. tapi kahirnya dikembangkan sebuah

HTML5 standar web baru sedang mencoba untuk mengubah itu.

    HTML5 telah dirancang dengan codec audio dan video yang harus mengambil

kekuatan pemrosesan kurang dari satu Flash player setara. Sebuah tes independen

telah menunjukkan bahwa html5 ini lebih efisien daripada Flash. Namun bahkan

dengan perbaikan dalam efisiensi pengolahan dari HTML5, itu tidak boleh

diasumsikan bahwa itu benar-benar akan menggantikan Flash atau bahkan

memiliki dampak yang signifikan, terutama pada konten web kaya. Flash masih

memiliki banyak keuntungan seperti:

~ Lebih baik sub pixel resolusi dan anti aliasing

~ Ada baiknya pengembang alat yang sangat baik (jauh lebih luas daripada

HTML5)

~ Flash array yang luas dari font mencari dan berdampak baik

    Pada titik ini, seniman grafis dan pengembang game masih mencintai Flash. Dan

meskipun mereka pasti menyukai ide yang mampu beroperasi dengan overhead

komputasi kurang, mereka ingin mendapatkan kontrol yang paling dan

kemampuan untuk menghasilkan results yang maksimal.Meskipun beredar untuk

banyak aplikasi video pemutaran sederhana seperti di YouTube, HTML5 memiliki

kemampuan untuk dengan cepat melampaui Flash sebagai video / audio player

pilihan di browser.

    Pada titik ini, perkembangan HTML5 YouTube didukung pemain masih dalam

tahap awal dan lebih banyak tweaking dan perbaikan harus dilakukan. Ini juga

membutuhkan dukungan yang baik dengan browser lain dan pengujian ekstensif

untuk bekerja keluar ketidakstabilan dan isu-isu ketidakcocokan / bugs. Namun

karena ini pada platform terbuka, ada banyak orang yang bekerja melalui isu-isu

ini sehingga hanya masalah waktu. Tetapi banyak orang merasa bahwa proses ini

dapat dengan mudah dilalui dalam waktu bertahun-tahun.

    Kenyataan masih tetap yang HTML5 tidak kompatibel dengan semua browser

dan banyak pengguna yang tahan terhadap perubahan ke browser lain. Sejauh rata-

rata pengguna komputer yang bersangkutan, jika ia bekerja ok bagi mereka mereka

tidak tertarik untuk pindah ke browser lain. Sebagai contoh, sebagian besar Intenet

Explorer dikritik karena ketidakstabilan dan kelemahan keamanan. Namun banyak

orang tetap berpegang pada browser itu dan sangat enggan untuk beralih ke sesuatu

seperti Firefox atau Chrome.

    Jadi menyadari bahwa bahkan dengan efisiensi potensial yang dapat membawa

HTML5 ke yang lebih baik, janga

n berharap penyebaran cepat atau perubahan jauh dari Flash.

Tujuan dibuatnya HTML5 antara lain:

1. Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript. 

2. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).

3. Penanganan kesalahan yang lebih baik.

4. Lebih banyak markup untuk menggantikan scripting.

5. HTML5 merupakan perangkat mandiri.

Fitur baru dalam HTML5:

Unsur kanvas untuk menggambar.

Video dan elemen audio untuk media pemutaran.

Dukungan yang lebih baik untuk penyimpanan secara offline.

Elemen  konten yang  lebih  spesifik, seperti  artikel, footer, header,

navigation, section.

Bentuk kontrol form seperti kalender, tanggal, waktu, e-mail, URL, search.

Beberapa kelebihan yang dijanjikan pada HTML5:

Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML)

danXML.

Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.

Integrasi ('inline') dengan doctype yang lebih sederhana.

Penulisan kode yang lebih efisien.

Konten yang ada di situs lebih mudah terindeks oleh search engine. 

Saat ini HTML5 masih dalam pengembangan, namun hanya beberapa

browser sudah mendukung HTML5.Beberapa browser tersebut seperti

Safari, Chrome, Firefox, dan Opera. Kabarnya IE9 (Internet Explorer) akan

mendukung beberapa fitur dari HTML5.

BAB III

KESIMPULAN

Web developer adalah seseorang yang menciptakan aplikasi berbasis web

dengan menggunakan bahasa pemrograman. Peran web developer adalah sebagai

penghubung dari semua sumber daya yang akan digunakan pada sebuah website,

mulai dari pemanggilan database, membuat halaman website yang dinamis, hingga

mengatur cara pengunjung untuk berinteraksi dengan elemen-elemen dari website

tersebut.

Seorang web developer yang handal akan terbiasa dengan bahasa pemrograman,

baik itu di sisi server ( server-side scripting ) maupun disisi client ( client-side

scripting ). Dan jangan lupa dengan aspek database yang akan digunakan.   

Berikut adalah bagian aplikasi yang harus dipahami oleh seorang web developer.

Web Asministrator adalah orang yang bertanggung jawab atas jalannya sebuah

website dan bertugas untuk mengawasi perkembangan website.

  

DAFTAR PUSTAKA

 

http://belajar-sendiri.com/2011/01/html5-generasi-terbaru-dari-bahasa-html%20/

http://www.djavanese.wordpress.com/

http://www.univind.com/

http://www.neohoster.com/

http://www.blog.neohoster.com/

http://blog-indonesia.com/blog-archive-12571-269.html