Saya sendiri Insya Allah akan kesana kepengen silaturahmi dengan rekan2 yang lain . Keterangan detail bisa dilihat infonya di web PHPUG

Sekilas web accessibility

Kalo kita membaca sekilas mengenai web accessibility di W3C Accessibility Initiative, dijelaskan secara singkat bahwa web accesibility adalah bagaimana seseorang yang mengalami kekurangan/kelemahan secara fisik (disable person/) masih dapat mengkases serta berinteraksi dengan web. Jadi jelas disini bahwa web accessibility tidak hanya menambahkan alt text di image, atau membuat struktur halaman web dengan benar, tapi juga bagaimana supaya website yang kita miliki bisa diakses dan digunakan secara maksimal tidak hanya oleh manusia dengan fisik normal tapi juga dengan orang yang memiliki keterbatasan fisik.

Bagi kita manusia dengan fisik normal, dapat dengan mudah menggunakan meng-klik mouse, melihat screen monitor dan mengakses konten. Hal ini tidak berlaku bagi penderita parkinson atau tuna netra misalnya. Untuk mengakses website bagi sebagian mereka ahrus menggunakan peralatan khusus baik hardware atau software. Peralatan khusus ini biasanya disebut assistive technologies, bisa berupa screen reader bagi para tuna netra, ada voice recognition software bagi para tuna rungu, dan masih banyak lagi. Tugas web developer-lah agar website yang kita develop bisa diakses oleh assistive technologies semacam itu.

Mengapa web accessibility penting

Berikut beberapa faktor utama:

• Sama seperti hal lain, mengakses serta berinteraksi dengan website adalah hak asasi setiap manusia, termasuk bagi orang yang secara fisik normal maupun yang memiliki kelemahan
• Seperti dijelaskan sebelumnya, beberapa negara telah menerapkan aturan-aturan web accessibility tersebut utamanya ditujukan untuk website perusahaan, organisasi dan pemerintahan. Jadi setiap organisasi akan memiliki peluang untuk dituntut oleh sebagaian orang yang menganggap sebuah website tidak accessible bagi mereka
• Anda kan tidak ingin mengabaikan sekitar 15% dari populasi manusia yang memiliki kekurangan fisik. Mereka juga memiliki kemampuan finansial yang berpotensi positif bagi sebuah perusahaan atau organisasi. Jangan hiraukan mereka
• Website yang mengikuti aturan accesibility umumnya secara otomatis akan usable, clean code dan semantically correct, sehingga secara teknis akan mempercepat akses dan memudahkan mesin pencari untuk meng-index halaman web secara maksimal

Membuat web accessibility

Untuk membuat web yang accessible tidak seperti membuat sebuah halaman web yang valid XHTML/CSS. Hal ini karena tidak ada patokan atau ukuran yang jelas bagaimana mengukur apakah sebuah website itu accessible atau tidak. Jadi kita tidak akan bisa membuat sebuah web yang 100% accessible, lho ? Yang bisa kita lakukan adalah membuat sebuah web yang secara maksimal memperhitungkan aturan-aturan web accessibility seperti yang telah dijelaskan lengkap beserta guideline-nya oleh konsorsium web W3C yang telah membentuk group kerja yang disebut Web Accessibility Iniative atau WAI.

Dengan adanya aturan web accessibility serta petunjuk dari WAI ini diharapkan semakin banyak website-website perusahaan yang mengikuti pedoman web accessibility sehingga tidak hanya manusia yang secara fisik normal tapi juga saudara-saudara kita yang memiliki kekurangan fisik bisa ikut berinteraksi sesuai dengan hak mereka sebagai manusia.

sumber:

• W3C WAI
• Web Accessibility, web standards and regulatory compliance

image courtesy of Web Accessibility, web standards and regulatory compliance.

]]> http://ex3me.org/2008/03/15/sekilas-web-accessibility/feed/ 13 http://ex3me.org/2008/02/29/telkomspeedy-ie6/ http://ex3me.org/2008/02/29/telkomspeedy-ie6/#comments Fri, 29 Feb 2008 14:51:44 +0000 adisetiawan http://ex3me.org/2008/02/29/telkomspeedy-ie6/

jadi buat yg make browser lain, gak usah diliat web-nya

]]> http://ex3me.org/2008/02/29/telkomspeedy-ie6/feed/ 1 http://ex3me.org/2008/02/24/sejarah-doctype-switch/ http://ex3me.org/2008/02/24/sejarah-doctype-switch/#comments Sat, 23 Feb 2008 16:23:23 +0000 adisetiawan http://ex3me.org/2008/02/24/sejarah-doctype-switch/ Penggunaan deklarasi DOCTYPE didalam sebuah dokumen html menandakan jenis dokumen tersebut dan bagaimana sebuah browser me-render output berupa halaman kepada user. Penggunaan DOCTYPE switch membuat halaman website kita bisa dapat berjalan di dua mode yaitu standard mode dan quirk mode tergantung dari jenis browser yang digunakan (kecuali IE 6 yg menambahkan tag xml utk dapat berjalan di quirk mode). Tapi tahukah anda kapan pertama kali ide penggunaan DOCTYPE switch dicetus ? adalah seorang yang bernama Todd Fahrner di tahun 1998 yg mencetuskan ide ini pertama kali.

Dia juga yang memiliki alasan betapa banyaknya website yang menggunakan table-based untuk melayout halaman, sehingga penggunaan DOCTYPE switch menjadi solusi pada saat itu. Saya juga baru tau kalo ide tableless design utamanya memiliki standard W3C udah ada semenjak tahun 1998

]]> http://ex3me.org/2008/02/24/sejarah-doctype-switch/feed/ 3 http://ex3me.org/2007/11/07/full-height-column-css-jquery/ http://ex3me.org/2007/11/07/full-height-column-css-jquery/#comments Wed, 07 Nov 2007 08:44:09 +0000 adisetiawan http://ex3me.org/2007/11/07/full-height-column-css-jquery/ Salah satu kelemahan menggunakan div adalah menyamakan tinggi beberapa div untuk kolom serta membuat div tersebut expandable mengikuti tinggi window. Liat screenshot berikut:



Secara default tinggi div kolom berbeda-beda mengikuti isi dari div tersebut. Belum lagi jika tinggi dari div kurang dari ukuran window browser sehingga footer tampak seperti melayang diatas. Ada beberapa teknik tertentu untuk membuat tinggi kolom tampak sama antara lain menggunakan cara faux column. Kali ini kita akan membuat agar semua kolom mempunyai tinggi sama dan jika kurang dari tinggi window browser maka secara otomatis akan menyamakan-nya. Yg kita perlukan adalah jQuery, plugin equalizeCols dan sedikit teknik css. Hasil akhir akan seperti ini:



berikut html & css-nya

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.equalizecols.js"></script>
<style type="text/css">
<!--
#header {
	height:100px;
	clear:both;
	color:green;
}
#wrapper {
    float:left;
}
#sidebar {
    float:left;
	width:200px;
	color:red;
}
#contentbar {
    float:left;
	width:400px;
	color:yellow;
}
#otherbar {
    float:left;
	width:200px;
	color:blue;
}
#footer {
    clear:both;
	height:30px;
	color:green;
}
-->
</style>
<script type="text/javascript">
$(document).ready(function() {
   if ($(window).height() > $('body').height()) {
		var selisih = $(window).height() - $('body').height();
		$("#wrapper").height($("#wrapper").height() + selisih);
		$("#sidebar").height($("#wrapper").height());
		$("#otherbar").height($("#wrapper").height());
   } else {
	$("#wrapper, #sidebar, #otherbar, #contentbar").equalizeCols();
   }
});
</script>
</head>
<body>
<div id="header">
	this is header
</div>
<div id="wrapper">
	<div id="sidebar">
	left column
	</div>
	<div id="contentbar">
	main content
	</div>
	<div id="otherbar">
	right column
	</div>
</div>
<div id="footer">
	copyright info
</div>
</body>
</html>

tidak ada yg spesial di css tersebut kecuali penggunaan float:left pada wrapper. Hal ini dilakukan agar wrapper mengikuti tinggi dari div yg paling tinggi. Pastikan juga jquery dan plugin equalizeCols sudah didownload dan path sudah benar. Sekarang kita bahas sedikit kode javascript diatas.

Seluruh kode ada didalam

$(document).ready(function() {   

});

agar semua berjalan saat document ready. Kemudian kita cek apakah tinggi dari window browser lebih besar dari tinggi body halaman menggunakan:

if ($(window).height() > $('body').height()) {

}

Jika ya maka kita akan menambahkan tinggi wrapper dengan selisih dari tinggi window browser dan body halaman. Untuk mendapatkan tinggi dari element di jquery cukup menggunakan $(element).height(); dalam hal ini

var selisih = $(window).height() - $('body').height();
$("#wrapper").height($("#wrapper").height() + selisih);
$("#sidebar").height($("#wrapper").height());
$("#otherbar").height($("#wrapper").height());

perhatikan bagaimana kita merubah tinggi dari wrapper dengan mudah dengan memasukkan nilai kedalam atribut height() dari wrapper. Terakhir jika ternyata tinggi body halaman lebih besar atau sama dengan tinggi window browser kita menggunakan plugin dari jquery yg berguna untuk menyamakan tinggi dari beberapa div dengan mudah dengan perintah:

$("#wrapper, #sidebar, #otherbar, #contentbar").equalizeCols();

Detail plugin tersebut bisa diliat disini.

Mudah kan? Jika tanpa jQuery, mungkin kode javascript-nya bisa berpuluh2 baris. Menggunakan jQuery, hidup kita jadi lebih mudah

happy jQuerying !

]]> http://ex3me.org/2007/11/07/full-height-column-css-jquery/feed/ 0 http://ex3me.org/2007/08/12/jquery-zebra-list/ http://ex3me.org/2007/08/12/jquery-zebra-list/#comments Sun, 12 Aug 2007 08:32:12 +0000 adisetiawan http://ex3me.org/2007/08/12/jquery-zebra-list/ Akhir-akhir ini lagi seneng2nya utak-atik jQuery. Penggunaan yg simpel dan mudah membuat banyak orang yg awam di javascript terutama DOM seperti web designer atau hobbyist seperti saya menyukainya. Contoh berikut memperlihatkan bagaimana membuat zebra list dengan mudah dan cepat menggunakan jQuery, unordered list dan sedikit CSS, contoh script diambil dari tutorial di 15 days of jQuery

Demo jQuery zebra list bisa dilihat disini

]]> http://ex3me.org/2007/08/12/jquery-zebra-list/feed/ 0