Kali ini saya akan memposting tentang Desain Dan Pemograman Web
Tahun
2011 merupakan tahunnya HTML5, setelah Internet Explorer 9 rilis
beberapa bulan lalu, maka semua browser utama (IE, Firefox, Safari,
Chrome dan Opera) telah mendukung HTML5 dan CSS3. Ya walaupun belum
semua fungsi HTML5 & CSS3 didukung spenuhnya, tetapi tahun ini
merupakan lahirnya HTML5. Jadi tunggu apa lagi, Anda masih pakai XHTML?
atau mungkin malah HTML4? mulailah belajar HTML5, ada banyak tag2 baru
yang sangat menarik. Disini saya akan mengajari tag-tag yang baru saja
dan yang paling banyak digunakan dalam melayout sebuah website.
Sebelum anda meneruskan membaca artikel ini, saya sarankan anda paham mengenai dasar-dasar HTML dan dasar-dasar CSS terlebih
dahulu. Karena disini saya hanya akan menerangkan tag-tag yang baru di
HTML5, maka saya asumsikan Anda sudah tahu tag-tag yang lama.
Oke, sebelumnya kita nanti akan membuat sebuah website dengan HTML5 yang layoutnya / wireframe nya kira-kira seperti ini:
Nah dengan wireframe seperti itu nanti kira-kira kita akan menggunakan tag berikut ini:
Oke ada banyak tag yang baru yah, mari kita mulai saja, siapkan teks editor Anda dan kita buat deklarasi HTML5 beserta
<head> nya:
Sip, lebih simpel kan, kalau dulu jaman XHTML kita perlu mendeklarasikan transitional, atau strict, sekarang cukup
<!DOCTYPE html>. Nah untuk isinya saya akan memberitahu tag-tag yang baru, nanti setiap kode berikutnya Anda masukkan didalam <body>, yang ada tulisan Isi web disini.<header>
Tag pertama kita adalah
<header>, sesuai namanya tag ini ditempatkan diatas pada bagian awal website. Kalau dulu kita pakai <div id="header"> sekarang kita menggantinya dengan<header>. Tetapi <header> tidak harus melulu dipaling atas web, kita bisa memiliki beberapa<header>, misal didalam artikel (kita akan bahas ini nanti dibagian article).
Nah, didalam
<header> ini bisa kita isi macam-macam, misal logo, navigasi, heading dan lain-lain. Bahkan diisi <div> pun tidak masalah.<hgroup>
Weittss
<hgroup>, apa lagi ini? Oke gampangnya jika kita memiliki satu atau lebih dari satu heading berurutan <h1> - <h6> maka kita bisa mengelompokkannya dengan <hgroup>.
Biasanya digunakan apabila kita memiliki judul dan ada sub judul, atau
untuk judul web kemudian kita memiliki slogan. Tapi kalau headingnya
cuma satu ya nggak usah dikasih <hgroup>. Oke daripada pusing langsung saja lihat contohnya ya:
Oke, kalau sudah lihat contohnya paham kan, sip nanti kita masih akan menambahkan sesuatu kedalam
<header>.<nav>
Nah, dari namanya sudah kelihatan kalau ini fungsinya untuk menampilkan navigasi pada website Anda. Ya kalau dulu kita pakai
<ul><li> untuk membuat navigasi menu, nah sekarang kita pakai... ummm.. ya sama pakai <ul><li> juga, tetapi kita bungkus dengan <nav>. Nah langsung saja kita lihat contoh kodenya:
Sip, sama kan? Yang perlu diingat bahwa
<nav> digunakan untuk ngelink kehalaman-halaman utama dari website atau bagian dari halaman itu sendiri. Kalau untuk paging, Social Networking atau list-list yang lain yang menggunakan <ul> nggak perlu dikasih <nav>.<section>, <article> dan <time>
Sesuai namanya
<article> digunakan untuk membungkus teks artikel atau teks utama dalam halaman web kita. Kita boleh punya banyak tag <article>, misal saja komentar, nah setiap komentar kita bungkus pakai <article> atau forum dan lain sebagainya. Apabila kita memiliki list atau daftar <article>, misal blog, maka kita perlu membungkusnya dengan <section> jika ada elemen lain yang bukan <article> dan menerangkan tentang <article> tersebut. Bingung? Langsung kecontoh:
Jadi karena diantara kelompok-kelompok
<article> ada tag <h1> maka kita tetap perlu membungkusnya dengan <section>.
<section>
tidak boleh diberi style, tidak boleh sebagai container layout. Tetap
gunakan <div> apabila ingin melayout.
Nah, berijutnya adalah
<time>,
sesuai namanya, digunakan untuk menunjukan waktu, biasanya digunakan
untuk menunjukkan waktu publish artikel, komentar, forum dan lain
sebagainya. <time>memiliki atribut datetime yang
berisi waktu bisa dalam format yyyy-mm-dd atau jam seperti 19:00. Hal
ini digunakan agar mesin pencari dapat mengenali waktu dalam format
standar meskipun kita menulisnya tidak dalam format standar. Contoh:
Mudah kan? oke kita akan lanjut ke tag berikutnya
Oh
iya, gosip mengatakan bahwa <time> akan dibuang dari HTML5 nggak
tau mau diganti apa, tetapi menurut saya tag <time> cukup bagus
dan tidak perlu digantikan
<figure> dan <figcaption>
<figure> digunakan sebagai pembungkus untuk tag <img>. Tetapi tidak selalu semua tag<img> kita bungkus dengan <figure>, hanya gambar-gambar yang utama saja atau gambar-gambar yang ingin kita beri label. Nah kita memberi labelnya dengan <figcaption>. Oke langsung saja lihat contoh kodenya:
Kira-kira kodenya seperti itu, kita tinggal menstylenya dengan CSS saja sesuai keinginan kita. Oh iya kita bisa memasang tag
<a>, <strong>, <em> didalam <figcaption><aside>
Nah ini nih tag yang saya sendiri masih bingung penggunaannya, karena tiap website contoh penggunaan
<aside> berbeda-beda. Oke kalau dilihat dari sejarahnya <aside> itu awalnya namanya <sidebar> tetapi kemudian diganti menjadi <aside>. Nah <aside> merupakan tag yang berisi konten yang berhubungan dengan konten utama dalam halaman web, oke berarti bisa disimpulan bahwa <aside> digunakan
sebagai sidebar pada website. Nah permasalahannya setiap sidebar misal
wordpress, pasti didalamnya terdapat konten-konten lagi, kalau di
wordpress biasanya widget. Nah terus kode nya seperti apa? Ada 3
kemungkinan, yang pertama:
Atau yang kedua:
Atau yang ketiga:
Nah yang mana yang bener?
<aside> didalamnya <aside> atau didalamnya <div>, atau<div> didalamnya <aside>? Tidak ada dokumentasi yang pasti yang mana yang benar, tetapi saya cenderung menggunakan yang ketiga, karena tingkatan <div> lebih luas atau lebih tinggi levelnya daripada <aside>. Tetapi ya terserah Anda, karena semua website yang sudah menggunakan HTML5 menggunakan ketiga cara tersebut.<footer>
Yang terakhir adalah
<footer>, sesuai namanya <footer> diletakkan dibagian bawah website, tetapi kita tidak hanya menggunakannya diakhir website saja. Sama seperti <header>dimana kita menggunakan <footer> dibagian akhir <article>. Jadi intinya <footer>sama dengan <header>, hanya saja <footer> diakhir sedangkan <header> diawal. Berikut ini contoh sederhana penggunaan footer diakhir website:Tag-tag lainnya
Sip,
gampang kan? eits jangan senang dulu, itu tadi semua contoh tag-tag
yang sering kita gunakan, masih banyak lagi tag-tag lainnya yang lebih
ajaib seperti
<canvas>, <audio>,<video>, <summary>, <progress>, <datalist> masih banyak lagi, lupa saya apa aja.
Tetapi
yang utama dan penting-penting ya itu tadi yang sudah saya sebutin.
Untuk yang lainnya kapan-kapan kalau sempat saya buat artikel
tersendiri, selamat mencoba, jika ada yang salah silahkan didiskusikan
di komentar dibawah.
[Update] 2011-11-09 11:00:00
Agar HTML5 jalan di IE8, IE7 dan IE6
Ada
yang kelupaan kemarin, bagaimana agar HTML5 jalan di IE8, IE7 dan IE6?
mengingat bahwa hanya Internet Explorer 9 saja yang support HTML5. Anda
bisa menggunakan Javascript untuk melakukannya, ada 2 yang menurut saya
bagus yaitu Modernizr dan HTML5 Shiv.
Saya akan memberitahu yang HTML5 Shiv saja karena scriptnya lebih cepat
dan mudah. Tetapi jika Anda ingin agar browser IE lama support CSS3
maka gunakan modernizr. Oke didalam header pasang saja kode seperti ini:
Senin, 17 Oktober 2011
Perbedaan CMS Gratis dan CMS Komersial
Jika
Anda mencari sebuah CMS (Content Management System) di Internet, maka
Anda akan diberikan banyak sekali pilihan. Seperti Joomla, WordPress,
dan Drupal adalah sebagian dari CMS Gratis (Open Source) yang populer.
Masih banyak CMS Gratis lainnya yang bisa Anda gunakan. Selain CMS
gratis, juga banyak CMS Komersial yang bisa digunakan untuk perusahaan,
toko online, web portal, web pendidikan, dll.
Diantara
CMS Gratis dan CMS Komersial tersebut, manakah yang terbaik untuk
digunakan? Sangat susah untuk menentukan mana yang terbaik, semua
tergantung pada jenis website yang akan dibuat, untuk apa website
tersebut dibuat, dan berapa budget yang tersedia untuk membuat website
tersebut.
Sebelum
Anda menentukan menggunakan CMS Gratis atau CMS Komersial untuk website
Anda, ketahui dulu apa perbedaan dari kedua jenis CMS tersebut.
CMS Gratis (Open Source)
CMS
Gratis tersedia secara gratis di Internet, yang bisa di-download dan
dirubah kode script-nya. Karena bersifat gratis, pengembangannya berasal
dari para developer yang secara sukarela berkontribusi dalam perbaikan
dan peningkatkan performanya. Biasanya perkembangan CMS Gratis lebih
cepat daripada CMS Komersial.
Kelebihan CMS Gratis :
Proses installasi yang cepat dan gratis, kecuali pembayaran untuk sewa domain dan hosting.
Pengujian performa dan stabilitas-nya lebih cepat (belum tentu lebih baik) karena pengguna dan pengembang banyak.
Biasanya banyak dukungan Technical Support di forum atau blog tutorial.
Kekurangan CMS Gratis :
Sistem
Keamanan tidak sebaik CMS Komersial, karena sifatnya yang Open Source
atau kode script bisa dilihat dan bisa dipelajari oleh siapa saja.
Jumlah
pengembang yang banyak menimbulkan kemungkinan besar terjadi kerusakan
(crash) pada sistem, karena tiap web developer memiliki kebiasaan yang
berbeda dalam mengembangkan suatu aplikasi web.
Karena
siapa saja boleh berpartisipasi untuk pengembangan, maka tidak semuanya
profesional. Sehingga sering muncul masalah karena pemrograman tidak
kompeten.
Pilihan menu setting yang sangat rumit dan dibutuhkan kemampuan bahasa pemrograman untuk meng-integrasi tiap-tiap aplikasi.
CMS Komersial
Pada
dasarnya CMS Komersial hampir sama dengan CMS Gratis, yaitu sama-sama
memiliki kemampuan untuk mengelola konten web. Hanya pada CMS Komersial
akses pada kode script dibatasi. Bahkan pada beberapa Perusahaan Web
Developer, tidak bisa mengakses kode script, atau harga untuk bisa
mengakses kode script sangat mahal. Dalam arti bahwa klien membeli hak
penuh atas kode script yang telah dibuat.
Kelebihan CMS Komersial :
Sistem
Keamanan lebih baik dari CMS Gratis karena kode script tidak bisa di
akses, atau hanya klien yang bisa melihat kode script tersebut.
Kemungkinan terjadi crash pada aplikasi lebih kecil karena aplikasi dibuat oleh developer yang sama.
Pengembangan lebih kompeten karena ditangani oleh developer yang profesional.
Bagi
klien, tidak rumit dan tidak dibutuhkan kemampuan bahasa pemrograman
karena biasanya CMS Komersial dibuat se-sederhana mungkin (users
friendly) sesuai dengan kebutuhan klien.
Kekurangan CMS Komersial :
Proses pembuatan yang lama dan biasanya harganya mahal, karena pihak developer membangun dari nol.
Performa dan stabilitas-nya butuh waktu lama untuk pengujian.
Technical Support biasanya dikenai biaya tambahan.
Elemen Dasar HTML
Heading
Heading
biasa digunakan untuk membuat judul pada halaman web. Tag yang
digunakan adalah <Hn> dengan nilai n antara 1 sampai dengan 6.
Semakin besar nilai n maka semakin kecil huruf yang tercetak. Default
heading adalah rata kiri. Jika kita ingin membuat heading rata tengah
maka tambahkan atribut ALIGN dengan nilai center atau right untuk rata
kanan.
paragraph
Untuk
membuat paragraph pada halaman web anda gunakanlah tag
<p>….</p>. Sama seperti heading, kita dapat mengatur
perataan paragraph dengan menambahkan atribut align di dalam tag
<p>.
garis horizontal
Untuk
membuat garis horizontal dalam halaman web, gunakanlah tag <HR>.
tag <HR> memiliki atribut Align, Width, Size, Color dan Noshade.
baris baru
Untuk membuat baris baru gunakanlah tag <BR>
Komentar
Komentar
biasanya digunakan untuk memberikan penjelasan atau keterangan tentang
dokumen yang kita buat. Untuk membuat komentar pada program gunakanlah
tag <!—di sini komentar ditulis-->. Kalimat yang berada dalam tag
tsb tidak akan dieksekusi oleh browser
Tutorial PHP – Program Hello World Dengan PHP
Untuk
memulai membuat program dengan php atau dengan bahasa pemrograman
lainnya, yang biasa diajarkan adalah membuat tampilan hello world dengan
bahasa pemrograman yang dipilih. Sekarang kita akan mencoba membuat
program hello world juga dengan php.
Tapi sebelum mulai belajar php, kita harus mempersiapkan beberapa software
- PHP
ini
adalah bahasa yang akan kita gunakan. Bahasa Pemrograman PHP berjalan
dengan menggunakan browser karena dia adalah bahasa pemrograman untuk
web
- webserver
webserver
adalah sebuah software yang digunakan sebagai server web. Dengan adanya
protocol ini, maka komputer kita bisa dibuka dari komputer lain atau
komputer kita sendiri dengan protokol http. Webserver yang paling
terkenal adalah apache. Hal ini disebabkan karena apache termasuk open
source dan free.
- database server
untuk
yang satu ini sebenarnya tidak wajib untuk pemula. Tapi untuk tingkat
lanjut kita membutuhkan database server untuk menyimpan data yang
banyak. Database server yang paling terkenal dan selalu berdampingan
dengan php adalah mysql. Hal ini juga disebabkan karena mysql bisa
didownload secara gratis.
Silakan download ketiga software itu di situs resminya masing-masing. Setelah itu silakan diinstall. Tapi jika tidak mau ribet
dan
repot menginstall 3 software sekaligus, ada baiknya anda menginstall
xampp. Keterangan lebih lanjut, tentang xampp dan cara instalasinya ada
di instalasi xampp
jika
sudah menginstall software-software di atas, silakan ketik code di
bawah ini. Boleh menggunakan notepad maupun editor php lainnya seperti
phpedit, macromedia dreamweaver dan editplus. Dalam contoh ini saya
menggunakan notepad++.
Tidak ada komentar :
Posting Komentar