FRAMEWORK dan HTML 5

FRAMEWORK

        Framework adalah kumpulan dari fungsi-fungsi/prosedur-prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan. Sehingga bisa mempermudah dan mempercepat pekerjaan seorang programmer, tanpa harus membuat fungsi atau class dari awal. Jadi, dengan adanya framework, pekerjaan kita akan lebih tertata dan terorganisir. Sehingga dalam pencarian kesalahan dalam pembuatan program akan lebih mudah dideteksi. Intinya, framework merupakan pondasi awal kita sebelum menentukan memakai bahasa pemrograman apa yang akan kita pakai. Setelah kita menentukan mau pakai framework apa, baru kita bangun programnya diatas framework itu. Tanpa framework, kita akan kesulitan saat membuat program.

Ada beberapa alasan mengapa menggunakan Framework:

• Mempercepat dan mempermudah pembangunan sebuah aplikasi web.
• Memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam setiap framework. (Dengan syarat programmer mengikuti pola standar yang ada)
• Framework menyediakan fasilitas-fasilitas umum yang dipakai sehingga kita tidak perlu membangun dari awal (Misalnya validasi, ORM, pagination, multiple database, scaffolding, pengaturan session, error handling, dll.)
• Lebih bebas dalam pengembangan jika dibandingkan CMS.

Apa itu CMS ?

      CMS adalah singkatan dari (Context Management System). Merupakan sebuah software yang memungkinkan seseorang untuk menambah, menghapus, atau memanipulasi isi dari suatu situs web. Dalam CMS, tidak diperlukan keahlian khusus dalam menguasai bahasa pemrograman web seperti HTML, PHP, ASP, dsb. Proses memodifikasi atau memanipulasi datanya berbentuk GUI (Graphics User Interface), tidak berbentuk coding. Kemampuan dari CMS berbeda-beda, walaupun begitu, kebanyakan dari software ini memiliki fitur publikasi berbasis web, manajemen format, kontrol revisi, pembuatan index, pencarian, dan pengarsipan. Dan kebanyakan CMS ini gratis. Karena kita tidak perlu untuk membeli domain.

Contoh CMS antara lain :

• Joomla
• Drupal
• Wordpress
• Plone
• VBulletin
• Moodle

Pemanfaatan CMS antara lain:

• Situs web perusahaan, bisnis, organisasi, atau komunitas
• Galeri foto 
• Aplikasi E-commerce (Jual-Beli Online)
• Mengelola website pribadi (Blog)
• Situs E-learning

Kembali ke framework. 

Sekarang masuk ke pengertian MVC (Model View Controller). 

Kebanyakan framework dalam aplikasi website berarsitektur MVC. Model View Controller merupakan suatu konsep yang cukup populer dalam pembangunan aplikasi web, berawal pada bahasa pemrograman Small Talk, MVC memisahkan pengembangan aplikasi berdasarkan komponen-komponen utama yang membangun sebuah aplikasi seperti manipulasi data, user interface, dan bagian yang menjadi kontrol aplikasi.

Terdapat 3 jenis komponen yang membangun suatu MVC:

1. View, merupakan bagian yang menangani presentation logic atau tampilan. Pada suatu aplikasi web bagian ini biasanya berupa file template HTML, yang diatur oleh controller. View berfungsi untuk menerima dan merepresentasikan data kepada user. Bagian ini tidak memiliki akses langsung terhadap bagian model.
   
   
2. Model, biasanya berhubungan langsung dengan database untuk memanipulasi data (insert, update, delete, search), menangani validasi dari bagian controller, namun tidak dapat berhubungan langsung dengan bagian view.
   
   
3. Controller, merupakan bagian yang mengatur hubungan antara bagian model dan bagian view, controller berfungsi untuk menerima request data dari user kemudian menentukan apa yang akan diproses oleh aplikasi.

        Dengan menggunakan prinsip MVC suatu aplikasi dapat dikembangkan sesuai dengan kemampuan developernya, yaitu ada programmer yang menangani bagian model dan controller, sedangkan designer yang menangani bagian view, sehingga penggunaan arsitektur MVC dapat meningkatkan maintanability dan organisasi kode. Walaupun demikian dibutuhkan komunikasi yang baik antara programmer dan designer dalam menangani variabel-variabel yang akan ditampilkan.

      Itulah tadi sekilas penjelasan tentang framework, CMS, dan MVC. Dalam dunia pemrograman, framework itu tidak hanya satu di dunia ini. Ada berbagai macam framework. Contohnya seperti CakePHP, CodeIgniter, Microsoft .NET, Zend, yii, Django, Play Scala, Spring, dll. Dan framework tadi akan saya bahas satu persatu di blog ini.

KELEBIHAN DAN KEKURANGAN HTML 5

          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.

MACAM-MACAM FRAMEWORK

a)      Framework PHP

• CakePHP
• Code Igniter (CI)
• Symphony
• Zend
• Yii
• Kohana

b)      Framework Javascript

• JQuery
• Mootools

c)      Framework Ruby

• Ruby on Rails (ROR)

Aplikasi framework yang menggunakan HTML5 :

Twitter 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 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

HTML kickstar Salah satu anak terbaru di blok, HTML5 Kickstart adalah paket ramping dan rata-rata HTML, CSS, dan file JavaScript yang menjanjikan untuk menyelamatkan pengembang UI jam kerja. Pada sekitar 300KB, HTML Kickstart paket cukup pukulan: komponen UI seperti tombol bergaya dan bar navigasi, ikon scalable (menggunakan Font mengagumkan), tata letak jaringan responsif, slideshow komponen sentuhan-enabled dan sebagainya.

Montage HTML framework 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 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 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 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 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.

6 List dari Aplikasi Editor HTML5.

1. Aloha Editor

 Aloha Editor adalah editor teks yang dikembangkan di JavaScript dan bekerja pada framework berbasis browser. Editor ini unik karena tidak seperti editor HTML pada umumnya, Aloha dapat tertanam dalam sebuah sistem manajemen konten (CMS) dan framework lainnya yang digunakan untuk pengembangan blog atau web pada umumnya.

2. BlueGriffon

 BlueGriffon adalah editor WYSIWYG yang baru diperkenalkan oleh Gecko. Aplikasi ini bebas didownload dan kompatibel untuk beragam sistem operasi seperti, Windows, Linux dan Mac OS. Memiliki tampilan yang sederhana, BlueGriffon memungkinkan untuk memodifikasi dokumen HTML5 secara mudah.

3. Maqetta

 Maqetta adalah editor open source lainnya yang memiliki kemampuan WYSIWYG. Aplikasi ini kompatibel dengan UI mobile dan desktop. Mendukung semua browser besar seperti Chrome, Safari dan Firefox. Maqetta juga memiliki beberapa fitur seperti editor halaman dan tema, wireframing, widget, dll

4. Bluefish

 Bluefish ini merupakan sebuah aplikasi di sistem operasi linux. kegunaannya mirip denga aplikasi dreamweaver yang ada di sistem operasi windows yaitu sebagai penyunting HTML, XHTML, CSS dll.tidak hanya untung menyunting HTML aplikasi ini juga bisa digunakan untuk mengedit bahasa pemrograman seperti C++, PHP, java dan sejenisnya.

5. Aptana Studio

 Aplikasi open source ini mendukung HTML5, JavaScript, CSS3, Python, PHP, Rails dan Ruby. Fitur lain seperti integrasi debugger, IDE, integrasi GIF, wizard dan lainnya.

6. Mercury

 Editor ini dikembangkan di jQuery, Rails3.1 dan CoffeeScript. Merkury kompatibel dengan semua browser besar seperti Chrome 10 +, Safari 5 + dan Firefox 4 +. Mercury memungkinkan desainer web untuk memasukkan dan mengedit link, gambar serta video.

MACAM MACAM FRAMEWORK HTML 5

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 

Construct2 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.

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.

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. 

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.