Belajar AngularJS dan HTML5

HTML5 

HTML 5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML 5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan. Dimana tujuan utama pengembangan HTML 5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

Baiklah saya akan menjelaskan apa kelebihan dan kekurangan dari HTML 5, berikut kelebihan dan kekurangan dari HTML 5.

Kelebihan yang dimiliki HTML 5 antara lain
·  Dukungan yang lebih baik untuk penyimpanan secara offline
·  Unsur kanvas untuk menggambar
·  Video dan elemen audio untuk media pemutaran file multimedia
·  Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, Section
·  Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search
·  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.
·  HTML5 merupakan perangkat mandiri
·  Penanagan kesalahan yang lebih baik
·  Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
·  Lebih markup untuk menggantikan scripting

Adapun kelebihan yang paling menonjol dari HTML 5 adalah kemudahan akses yang lebih baik. Tag Baru seperti header, footer, nav, section, asidedll memungkinkan browser untuk mengakses konten dengan mudah. Sebelumnya, kita hanya menentukan hal tersebut dengan tag dan menggunakan atribut id ataupun class. Dengan tag html 5 yang baru,
browser mampu menjelajah dokumen HTML dengan lebih baik lagi. Selain itu dukungan yang lebih baik terhadap video dan audio. Beberapa Peramban yang sudah mendukung HTML 5 yaitu Safari, Chrome, Firefox, dan Opera.

Kelemahan yang ada pada HTML 5

Saat ini HTML5 masih dalam pengembangan, sehingga hanya beberapa browser yang sudah mendukung HTML5, seperti fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada beberapa browser. Beberapa browser yang sudah mendukung HTML 5 seperti Safari, Chrome, Firefox, dan Opera. Namun kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5.

Aplikasi framework yang menggunakan HTML5 :

·  Twitter Bootstrap

Bootstrap adalah populer, pengembangan kerangka front-end/UI modern. Ini fitur penuh dan akan memiliki sebagian besar hal-hal yang Anda perlukan untuk mengembangkan situs responsif dan aplikasi. Bootstrap memiliki tata letak yang responsif 12-grid, 13 plugin jQuery kustom untuk UIS umum seperti komidi putar dan modal windows, customizer Bootstrap, dan banyak lagi. Bootstrap terdokumentasi dengan baik, dan ini proyek open source memiliki banyak liputan di blog dan situs tutorial.

·  Foundation

Yayasan populer kerangka front-end lain responsif. Dengan kerangka HTML5 modern, Anda bisa mendekati desain web baik mobile pertama, atau dari layar yang besar ke ukuran mobile. Ini memiliki kemampuan cepat-prototyping, sistem grid responsif dan banyak lagi. Yayasan adalah dengan ZURB, sebuah perusahaan desainer produk difokuskan pada penyediaan solusi berbasis web.

·  Skeleton

Skeleton adalah responsif boilerplate CSS sederhana dan bersih untuk HTML5 website dan aplikasi. Itu punya hanya hal yang Anda butuhkan, dan tidak lebih. Beberapa fitur utama: a grid layout responsif, pertanyaan media standar untuk perangkat-spesifik gaya properti CSS, kelas CSS untuk elemen gambar responsif yang skala dengan grid layout, template PSD untuk mengejek desain web Anda, dan HTML5 belati untuk old web browser.

·  HTML Boilerplate

Pada tahun 2010, HTML5 Boilerplate menjadi salah satu yang pertama, dan front-end kemudian, paling populer alat pengembangan web open source untuk mendapatkan HTML5 website dan aplikasi web dan berjalan dalam waktu singkat. Ini adalah solusi pengembangan web kompilasi yang memungkinkan situs kami untuk mendukung web browser modern. Termasuk dalam HTML5 Boilerplate adalah HTML template seluler-anak, ikon placeholder, CSS reset untuk normalisasi / standarisasi nilai properti stylesheet Anda, pertanyaan media standar untuk layar populer melihat, sebuah belati HTML5 untuk web browser non-modern

·  Montage HTML framework

Montage adalah kerangka HTML5 open source untuk membangun aplikasi modern. JavaScript perpustakaan ini menggunakan mengikat deklaratif yang dengan mudah membantu Anda menyimpan data aplikasi Anda dan UI di sync. Montase juga memiliki fitur yang disebut Blueprints untuk metadata associatively mengikat ke objek app - fungsi yang cukup bagus untuk menangani dengan banyak elemen halaman dinamis.

·  Sproutcore

SproutCore adalah kerangka front-end untuk membangun aplikasi HTML5 cepat.Ini mengikuti pola arsitektur MVC dan menjanjikan penggunanya kemampuan untuk kerajinan pengalaman pengguna asli seperti untuk Web.

·  Zebra UI

Zebra adalah UI framework open source yang kaya yang memanfaatkan HTML5 kanvas sebagai tulang punggung kemampuan render. Zebra mengatakan bahwa menggunakannya "bukan ilmu roket" dan bahwa Anda bisa memulai dalam 5 menit.

·  Createjs

CreateJS adalah suite perpustakaan JavaScript open source dan alat untuk membuat kaya, konten interaktif HTML5. Ini terdiri dari 5 perpustakaan JavaScript modular. Ini akan membantu Anda dengan menerapkan efek animasi, mendukung HTML5 audio dalam situs Anda, dan banyak lagi

·  Less Framework

Kurang Framework adalah kerangka front-end yang modern untuk membangun desain responsif. Mirip dengan Skeleton (dibahas di atas), Kurang Kerangka berfokus pada menjadi hanya kerangka grid layout polos dan sederhana. Ini memiliki 4 layout pre-built: Default, Tablet, Handphone dan Luas Mobile.
MACAM MACAM FRAMEWORK HTML 5

1. ImpactJS adalah engine HTML5 yang berbayar. Cukup mahal memang biaya yang harus dikeluarkan untuk menggunakan engine ini, yaitu sebesar $99. Impactjs sendiri fokus bagi pengembangan aplikasi game 2D. ImpactJS juga bekerja sama dengan AppMobi XDKuntuk memudahkan para pengembang dalam urusan environment pengembangan. ImpactJS juga memiliki fitur multiplayer. Berikut adalah beberapa demo aplikasi game yang dibuat menggunakan ImpactJS : Biolab Disaster, Z-Type , Creatures and Castles,Steamclash dan Private Joe

1. Construct 2 hadir dengan tagline nya yaitu “Drag and drop game maker“. Saya rasa Construct 2 ini cukup cocok bagi para pemula yang ingin belajar membuat game dalam HTML5. Proses yang mudah dan sangat simpel, memungkinkan pengembangan gameHTML5 yang simpel dapat dikerjakan dalam waktu yang cepat. Constuct 2 ini juga cocok untuk digunakan dalam membuat game HTML5 di Facebook. Kabar bagusnya Consturct 2 memiliki versi gratis

1. RPG JS fokus untuk pengembangan game HTML5 bergenre RPG. Fitur fitur sepertiinteraction event, save/load, action event, dan lain sebaginya, cukup dibantu jika anda menggunakan RPG JS. RPG JS ini jika digabungkan pengunaannya dengan RPG Creator, maka pengembang game dapat membuat MMOPRG game berbasis HTML5 dengan lebih mudah.

1. Limejs adalah framework HTML5 yang memiliki keunggulan di perangkat layar sentuh. Mereka fokus untuk membantu para pengembang memaksimalkan layar sentuh untuk sebuah game. Limejs sendiri saat ini tersedia gratis. Berikut adalah beberapa contoh dari game HTML5 yang dibuat menggunakan limeJS : Roundball dan Zlizer. 

1. Crafty menawarkan kemudahan bagi para pengembang game HTML5 dalam urusan animasi. Crafty juga memberikan kemudahan untuk diimplementasikan di perangkat layar sentuh seperti iPad, Android tablet, hingga BlackBerry Playbook. Sampai saat ini Crafty masih tersedia gratis dan masih terus dalam tahap pengembangan. Berikut beberapa contoh game HTML5 menggunakan Crafty : Cron dan Code Commander

ANGULARJS

AngularJS adalah suatu javascript framework yg disupport oleh google, dimana pada angularJS ini kita dapat dengan mudah mengorganisir file-file js kita, dan tentunya fungsi-fungsi didalamnya juga dapat dengan mudah kita struktur. Jadi anggapan “javascript susah dimaintenance” tidak selamanya benar . Selain itu, pada angularJS sudah disediakan beberapa dependency yang nantinya dapat kita inject kedalam script kita sesuai kebutuhan. Bener-bener dipermudah pokoknya. (FYI, author gak jago javascript lho, tp gak ngerti kenapa kok angular mudah banget buat dipelajarin). Terus “HTML enhanced for web apps!” maksudnya, angularJS lebih memfokuskan layouting dengan pure HTML. Itulah mengapa angularJS bermana angular, yang artinya sudut (HTML terdiri dari tag-tag yang bentuknya sudut “<” dan “>”), terkonsentrasi pada manipulasi DOM. Kelebihan dari angularJS adalah 2-way-data-binding-nya. Terus bagaimana cara pakainya? Tinggal download aja, terus dipanggil aja di layout. hehe

Struktur AngularJS

Deskripsinya sebagai berikut : Ada 2 folder dibawah folder root nya javascript, yaitu “/angular” dan “/libs”. Folder /angular berisi kustom kita, sedangkan folder /libs berisi file-file hasil download angularJS. Nantinya kita akan fokus pada folder turunan /angular.

• /directives, berisi file-file directive. Directive sendiri yaitu fitur pada angularJS dimana kita dapat membuat html sendiri. Pada dasarnya kan html terdiri dari tag-tag, misal
  , , , dsb. Nah pada directive, kita dapat mendefiniskan tag html sendiri. Jadi kita dapat membuat , dan di dalam tag tersebut dapat berupa callback fungsi, dsb.

• /filters, nah pada /filters akan kita sematkan file-file dengan fungsi filter. Terus, filter sendiri apa sih definisinya?? Pada kenal filter atau saringan gak? ya seperti itulah filter pada angular, untuk filter. Misal uppercase, akan menampilkan text capital, dsb. Pastinya angularJS memperbolehkan kita untuk membuat filter sendiri disamping beberapanya telah disediakan (build-in) /ng-mods, dibagian ini yang nantinya kita sering oprek. Kalau kita expand folder

• /ng-mods, maka dapat ditemukan folder-folder yang didalamnya ada folder-folder lainnya. Persis dibawah /ng-mods, ada folder /[CONTROLLER_NAME]. Karena author pakai MVC framework (rails), pastinya ada controllers pada base-code kita. Tujuan dari struktur ini adalah untuk mempermudah controller rails mana pakai controller angular mana. Didalam folder

• /[CONTROLLER_NAME] terdapat spesifik method-method yang membutuhkan view. Misalnya dashboard, show, edit, login, dsb

•  /services, folder ini lebih ditujukan untuk koneksi ke database. Setiap proses yang mengirim data dan mengambil data ke database, maka fungsi-fungsi javascriptnya ada dalam folder ini. Dan tentunya dibedakan untuk tiap-tiap model. Jadi misal kita memiliki model User dan Article, maka pada folder /services akan ada 2 file : user.js => berisi create update delete User; article.js ; berisi create update delete Article. 

• ng-config.js, kok ini bukan folder? Iya, ini bukan folder tetapi file js. Isinya sih spesifik manipulasi routes yang ada pada aplikasi kita nantinya. (bakal dijelaskan lebih lanjut juga nantinya, keep in touch aja lah. hehe).

sumber : http://dantedimartino.blogspot.com