Side22Press » HTML CSS http://side22.com Learning Opinion Web Blog Fri, 06 Apr 2012 07:52:08 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Jika IF adalah IS, apakah WHAT itu ? http://side22.com/2010/testing-elemen-markah-sesi-1 http://side22.com/2010/testing-elemen-markah-sesi-1#comments Mon, 09 Aug 2010 00:32:48 +0000 Harry http://side22.com/?p=613 Jika artikel semacam ini, di tuliskan bersamaan dengan proses pembuatan desain sebuah tema, menyertai sebuah pemahaman serta pembelajaran elemen elemen dalam Bahasa Markah Hiper Teks (BMHT). Maka seharusnya, pertanyaan dan kerumitan berikut di bawah ini tidak perlu muncul ke permukaan. Meskipun dapat di tenggelamkan kembali dengan perdebatan batin ;
Sedang sibuk belajar, sehingga lupa berkarya atau membuat sebuah karya ?.
ataukah…
Terlalu sibuk berkarya, sehingga Learning Opinion Web Blog sebagai tagline blog, pada akhirnya hanya menjadi sebuah pajangan ?.

If there… ah… jika kelak harus mengikuti standar baru cara menulis Bahasa Markah Hiper Teks (BMHT). Jika di kemudian hari, User Angent (UA) peramban sudah menggunakan rekomendasi termutakhir saat merender sebuah elemen. Maka biarlah dokumentasi ini yang akan saya tengok pertama kali saat perubahan itu terjadi.

Tabel berikut ini hanya memuat beberapa elemen yang secara standar akan di cetak miring oleh peramban. Tulisan ini tidak di peruntukkan bagi pakar pakar CSS, karena hanya akan di pergunakan sebagai pengingat pribadi untuk tidak berboros bita dengan lembar gaya Cascading Style Sheet (CSS) hanya untuk memiringkan sesuatu yang sebenarnya tidak perlu di miringkan.Kecuali anda mempunyai tujuan yang lain… monggo alias silahkan, terserah pembaca.

Elemen elemen berikut, standarnya akan di render miring oleh User Agent (UA) peramban.
No. Elemen Contoh Penggunaan
1 address
Untuk keperluan pribadi, silahkan hubungi Handoko Harry.
2 cite Blog pemelajaran yang paling aneh adalah Side22Press milik Handoko Harry.
3 dfn

Learning Opinion Web Blog LOW adalah opini pembelajaran web blog.

Saya akan berpikir dua kali untuk menjadikan artikel LOW, sebagai referensi tulisan di blog pribadi saya.
4 em & i Tulisan yang dipublikasikan LOW, kadang kadang lebih sering membingungkan pembaca daripada mencerahkannya.
5 var Sial… blog ini belum/tidak menggunakan MathML. Tetapi… jika (a b) adalah matrik, maka (x,y2) adalah b.

Adalah dinamakan sebagai sebuah pemelajaran, karena tabel diatas pasti masih menyisakan banyak kekurangan.
Is it neccessary to discuss ?
Apakah masih perlu untuk di diskusikan lagi ? It’s about coding dicipline, and all yours.
What will be happen, happenlah.
Itu maksudnya, apakah saya masih terlihat menulis sebuah tutorial ?
…

]]> http://side22.com/2010/testing-elemen-markah-sesi-1/feed 7 Keteraksesan kata-kata Istimewa dalam Senarai http://side22.com/2010/keteraksesan-istilah-dalam-senarai http://side22.com/2010/keteraksesan-istilah-dalam-senarai#comments Wed, 16 Jun 2010 05:41:39 +0000 Harry http://side22.com/?p=579 Tulisan pembelajaran ketiga tentang senarai ini, diambil dari sudut pandang Readable, pada kriteria sukses unusual words yaitu kata-kata yang tidak lazim (biasa dipergunakan secara umum dalam bahasa tulis dan bahasa lisan) dari dokumen 'petunjuk keteraksesan isi web' – WCAG. Pada konteks tulisan ini, kata yang tidak umum tersebut akan ditulis sebagai kata-kata yang perlu di istimewakan.

Pembelajaran ini masih berhubungan dengan tulisan tentang petunjuk keteraksesan isi web – Navigable, pada tulisan senarai pranala, dan masih berkaitan juga dengan inteprestasi Adaptable – kriteria sukses info and relationships pada tulisan elemen BMHT yang semantik untuk senarai.

Dari paragraf pertama tulisan ini, teknik mengistimewakan sebuah kata atau frase sudah diterapkan secara langsung. Kombinasi elemen definisi dalam baris <dfn> dan tanda kurung buka – kurung tutup, dipergunakan untuk mengistimewakan kata 'unusual words' dan kata 'lazim'. Tetapi, tulisan ini tidak mentitikberatkan penggunaan elemen <dfn>, melainkan difokuskan pada latihan pengistimewaan kata dengan menggunakan senarai untuk tujuan keteraksesan.

Beberapa kata yang dipergunakan dalam penajukan tulisan ( 'keteraksesan istilah dalam senarai' ) sampai dengan paragraf ini, perlu untuk di istimewakan dalam senarai sbb (sebagai berikut) ;

Senarai

Sumber : KBBI Daring.

se·na·rai n daftar: — nama pengarang; — harga barang; — kata asing
me·nye·na·rai·kan v membuat senarai; menuliskan dalam bentuk daftar: – judul buku yg diterima perpustakaan

Keteraksesan

Sumber : Panduan Pembakuan Istilah — "Pedoman Khusus Pemakaian Istilah Komputer", Butir 3.

Dari istilah akses (access) dapat diturunkan pengakses (accessor), terakseskan (accessible), keteraksesan (accessibility), aksesi (accession), dan seterusnya.

Penajukan

Sumber : Panduan Pembakuan Istilah — "Senarai Padanan Istilah".

Tujuan : Konsistensi pribadi saat menggunakan kata judul untuk elemen <title> yang ditempatkan dalam tajuk halaman web — <head> dan kata penajukan untuk elemen <h1>...<h6> yang diletakkan dalam badan halaman web — <body>.

Blog ini bukan dokumentasi teknis dan pengelolanya bukan seorang ahli bahasa, bukan pengembang perangkat lunak maupun pengembang perangkat keras. Pengelola blog ini hanyalah sebagian kecil rakyat Indonesia yang ingin mencintai istilah-istilah komputer dalam bahasa Indonesia dan hanya sekedar ingin konsisten dalam pembelajaran ini.

Pembaca budiman yang mengetahui adanya pemutakhiran dokumen Panduan Pembakuan Istilah diatas, Mohon saran dan koreksinya.

]]> http://side22.com/2010/keteraksesan-istilah-dalam-senarai/feed 2 Masih Enggan Meninggalkan Atribut Target ? http://side22.com/2010/atribut-target-pada-elemen-anchor http://side22.com/2010/atribut-target-pada-elemen-anchor#comments Sat, 05 Jun 2010 08:08:04 +0000 Harry http://side22.com/?p=556 Setelah Yrrah –tema WordPress– terpakai, menggunakan format dokumen XHTML 1.0 Strict dan meninggalkan format DTD XHTML 1.0 Transitional. Setelah sekitar 6 (enam) bulan yang lalu sempat menuliskan sebuah kuotasi pada tulisan anchor text yang baik sebagai berikut ;

Sedikit catatan untuk halaman HTML dengan tipe dokumen DTD Strict : Atribut target sudah tidak disarankan untuk dipergunakan.

Tulisan ini hanyalah sebuah penegasan pribadi ketika harus mulai menanggalkan kebiasaan menulis atribut target pada lingkungan elemen anchor <a>

Atribut target pada konteks keleluasaan Pengguna ?

HTML 4.01 Transitional dan XHTML 1.0 Transitional mengijinkan penggunaan atribut target pada elemen anchor <a>, untuk membuka jendela baru yang menampilkan halaman yang ditautkan pada pranala. Teknik pada tipe dokumen transitional ini dimaksudkan untuk menghindari munculnya jendela pop-ups yang berpeluang membuat bingung beberapa pengguna.

Mengakomodasi keleluasaan pengguna dalam memprediksi halaman yang akan muncul pada layar komputer dihadapannya, dengan mengikuti teknik HTML dan XHTML diatas, adalah salah satu contoh-situasi pada pemahaman dan pembelajaran kriteria-sukses WCAG 2.0 – Change on Request. "Changes of context are initiated only by user request or a mechanism is available to turn off such changes. (Level AAA) "

…to eliminate potential confusion that may be caused by unexpected changes of context such as automatic launching of new windows…

"Bagaimana dengan kekeluasaan pengguna pada tipe dokumen yang strict-ketat ?". Dari pertanyaan inilah beberapa webmaster menganggap bahwa tipe dokumen transitional lebih memberikan keleluasaan pada pengguna saat memprediksi perubahan konten, dibanding tipe dokumen yang strict. Benar, sampai kalimat ini anggapan tersebut adalah benar, dan rasa enggan untuk berpindah haluan menggunakan tipe dokumen yang ketat adalah wajar.

Bungkukkan badan, sedikit saja…

Kebiasaan "membungkukkan badan" di budaya timur tidak usah diperjelas pada konteks tulisan ini. Anda lebih memahaminya dibanding saya.

Tulisan ini tidak bermaksud menyerang, offensive, menuduh apalagi menghakimi. Tetapi, menganggap, menyamaratakan semua pengunjung atau pengguna secara umum – general user sebagai yang primitif, adalah lebih primitif dalam konteks ketersediaan fitur-fitur canggih pada peramban-peramban modern yang ada saat ini.

Menghubungkan strict doctype yang sepintas tidak mendukung kriteria sukses perubahan konteks atas kehendak pengguna berkaitan dengan peniadaan atribut target, harus menghubungkan kembali dengan maksud dan tujuan yang belum tercapai pada tulisan Modern UA-Peramban. Kemudian, yang disebut dibawah ini hanya sebagian kecil dari hubungan termaksud, Apa pendapat anda tentang :

  1. Tombol-tombol : "Go back one page" pada Mozilla Firefox, "Back(Alt+Left)" pada Opera, "Click to go back, hold to see history" pada Google Chrome, "Show the previous page" pada Safari, serta "Back" pada Microsoft IE ?.
  2. Sebaris URL yang muncul pada status bar saat melakukan hover pada sebuah pranala ?
  3. Penambahan fitur "Tab Sheet" pada peramban-peramban populer ?

Sekian saja penegasan pribadi tentang atribut target yang harus ditinggalkan dari lingkungan elemen anchor <a>. Mudah-mudahan, anda,… pengembang-pengembang peramban mengerti isyarat "membungkukkan badan" yang saya lakukan. Karena sebagai enduser, hanya sebatas itu yang bisa saya lakukan untuk anda sekalian.

]]> http://side22.com/2010/atribut-target-pada-elemen-anchor/feed 32 Elemen HTML Lists yang Semantik pada Konten http://side22.com/2010/elemen-html-lists-pada-konten http://side22.com/2010/elemen-html-lists-pada-konten#comments Thu, 27 May 2010 15:21:25 +0000 Harry http://side22.com/?p=535 Beberapa kesalahan saat menggunakan, menyajikan markah lists pada konten yang bersifat teknis atau tutorial, mungkin saja terjadi. Kesalahan tersebut bisa menyebabkan konten tidak lolos test validasi HTML menggunakan perangkat W3C Markup Validator. Bagi blogger yang cinta pada badge atau logo validasi serta mempunyai semangat untuk berdisiplin dalam coding, tentu sebuah pengalaman yang tidak menyenangkan hati ketika harus berhadapan dengan kata inkonsistensi.

Haruskah kemudian menjadi jera dan menanggalkan cara penulisan markah HTML lists yang semantik dari sebuah konten ? Jangan pernah (pikirkan dan lakukan).

Sekilas tentang HTML Lists

HTML telah menyediakan 3 (tiga) mekanisme untuk menentukan daftar informasi (lists of information), yaitu ;

Unordered List

Elemen HTML ini dituliskan dengan kode markah (tag) <ul></ul>. Pada konteks penulisan sebuah konten (tulisan ini), tag ul dapat dimanfaatkan untuk menempatkan daftar item ( li ) yang tidak memerlukan penekanan khusus.

Ordered List

Dalam HTML, elemen ini dikodekan dengan tag <ol></ol>. Berkebalikan dengan tag ul, pada konteks penulisan sebuah konten, tag ol dipergunakan untuk menempatkan daftar item (li) yang memerlukan penekanan khusus. Misalnya, untuk menuliskan langkah-langkah yang harus dilakukan pada sebuah konten tutorial.

Definition List
Daftar definisi dibuat menggunakan elemen <dl></dl>. Pada sebuah konten, elemen HTML ini biasanya dipergunakan untuk menuliskan beberapa istilah beserta definisi atau penjelasannya. (seperti yang sedang anda baca saat ini).

Lebih lanjut tentang elemen-elemen list pada HTML dapat dibaca di W3C-Standar Spesifikasi List.

Elemen List yang Semantik pada Konten

Pada tujuan yang berbeda dari tulisan ini, seperti untuk membangun struktur website yang accessible dan navigable, tag ul biasanya dipergunakan untuk membangun blok menu berisi daftar tautan, pranala antar halaman atau posting. Lebih lanjut, dapat dibaca pada tulisan tag ul untuk list pranala menu. Jangan lupa membaca tautan komentar dari unessential weblog-nya Pak Dani Iswara.

Kembali pada interpretasi penggunaan elemen lists HTML yang semantik pada konten, tulisan ini tidak bermaksud menjelaskan benefit yang didapat dari disiplin koding dengan markah HTML yang benar, valid, dan berguna. Tetapi contoh penerapan langsung elemen lists HTML pada tulisan ini, dilakukan pada pendekatan :

  1. Semboyan WordPress

    WordPress is a state-of-the-art publishing platform with a focus on aesthetics, web standards, and usability.

    Pengguna WordPress tentu tidak asing dengan semboyan diatas. Selanjutnya bagaimana jika dihadapkan pada tantangan penulisan yang semantik menggunakan elemen lists untuk istilah-istilah "aesthetics", "web standards", dan "usability" diatas ?. Yup. Karena heading yang saya pergunakan hanya sampai level-4, maka ;

    • Markah elemen list HTML berikut seharusnya sudah sama-sama semantik :

      aesthetics
      aesthetics adalah blah blah blah…
      web-standards
      web-standards adalah blah blah blah…
      usability
      usability adalah blah blah blah…
      <ol>
 <li>
  <h4>Semboyan WordPress</h4>
  <blockquote><p>WordPress is...</p></blockquote>
  <p>Pengguna WordPress...</p>
  <ul>
   <li>
   <p>Markah elemen list...</p>
   <dl>
    <dt><strong>aesthetics</strong></dt>
    <dd>aesthetics adalah blah blah blah...</dd>
    <dt><strong>web-standards</strong></dt>
    <dd>web-standards adalah blah blah blah...</dd>
    <dt><strong>usability</strong></dt>
    <dd>usability adalah blah blah blah...</dd>
   </dl>
   </li>
  </ul>
 </li>
</ol>

    • Jika dibandingkan dengan penggunaan markah list seperti berikut :

      • aesthetics

        aesthetics adalah blah blah blah…

      • web-standards

        web-standards adalah blah blah blah…

      • usability

        usability adalah blah blah blah…

      <ol>
 <li>
  <h4>Semboyan WordPress</h4>
  <blockquote><p>WordPress is...</p></blockquote>
  <p>Pengguna WordPress...</p>
  <ul>
   <li>
   <p>Jika dibandingkan dengan...</p>
   <ul>
    <li>
     <h5>aesthetics</h5>
     <p>aesthetics adalah blah blah blah...</p>
    </li>
    <li>
     <h5>web-standards</h5>
     <p>web-standards adalah blah blah blah...</p>
    </li>
    <li>
     <h5>usability</h5>
     <p>usability adalah blah blah blah...</p>
    </li>
   </ul>
   </li>
  </ul>
 </li>
</ol>

  2. Konten yang Adaptable dengan Elemen HTML-Lists

    Jika pada tulisan sebelumnya (yang tersebut diatas), penggunaan elemen lists dilakukan dari sudut interpretasi navigable. Maka dalam tulisan ini penggunaan elemen lists pada sebuah konten diambil dari sudut interpretasi Adaptable

    Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

    Sebuah konten sebaiknya dapat dipresentasikan, disajikan juga dengan beberapa cara tanpa harus kehilangan informasi dan atau strukturnya. Petikan dibawah ini adalah diskripsi "Penggunaan ol, ul dan dl untuk lists atau daftar item", yang diambil dari dokumen rekomendasi "Techniques for WCAG 2.0" pada teknik HTML dan XHTML

    …create lists of related items using list elements appropriate for their purposes. The ol element is used when the list is ordered and the ul element is used when the list is unordered. Definition lists (dl) are used to group terms with their definitions…

Sekali lagi, jika ada yang mempertanyakan benefit dari disiplin koding. Jawabannya tidak ada kecuali hanya sebuah kalimat "This document was successfully checked as… Result:Passed". Tetapi dengan memberikan struktur yang semantik dalam sebuah konten, termasuk didalamnya penggunaan elemen lists secara tepat-guna (seperti maksud yang terkandung pada tulisan ini). Maka, setidaknya konten yang dibuat telah siap dibaca mesin, Assitive Technologies dan manusia, baik yang normal serta yang disebut sebagai penyandang disabilitas.

ug13usc131

]]> http://side22.com/2010/elemen-html-lists-pada-konten/feed 9 Parse error Lexical error, Pesan Kesalahan Validasi Markah http://side22.com/2010/parse-error-lexical-error-pesan-kesalahan-validasi-markah http://side22.com/2010/parse-error-lexical-error-pesan-kesalahan-validasi-markah#comments Fri, 14 May 2010 16:02:55 +0000 Harry http://side22.com/?p=508 Dokumentasi pribadi ini di inspirasi oleh cerita Pak Aldy M. Aripin, pada tulisan Kegagalan validasi CSS level 2.1 saat melakukan pengembangan tema WordPress di personfield beliau. Sebelum menuliskan yang berbau teknis seperti pesan kesalahan Parse error Lexical error at line. Secara pribadi, akhirnya,… dengan terpaksa harus menggaris-bawahi kembali pemahaman makna validasi. Tertarik dengan materi validasi ataupun tidak mau tertarik, tetap akan berhubungan dengan pengembangan web design yang sudah dihadapkan pada era HTML5 dan CSS level 3. Dan ketertarikan tersebut saya serahkan kembali kepada anda sekalian. Selanjutnya mohon dicatat, tulisan ini tetap sebuah opini dan bukan tutorial.

Pesan kegagalan validasi-CSS dengan jigsaw-css-validator seperti ;

Parse error Lexical error at line [angka#1], column [angka#2]. Encountered: "[kode-markah#1]" ([nomor-entitas]), after : "[kode-markah#2]".

bisa saja diikuti pesan lainnya seperti No Style Sheet Found. Dan berikut adalah terjemahan bebas pesan kesalahan diatas versi saya;

Parse error

Kesalahan parsing markah. Saat ini sebuah halaman web dapat disajikan dengan beberapa bahasa pemrograman yang dikodekan dan diurai pada sisi server dan sisi klien. Masing-masing bahasa pemrograman mempunyai sintaks penulisan yang berbeda, dan disinilah kesalahan parsing markah tersebut bisa terjadi.

Khusus pada penyajian CSS, Expert-Master tentu tidak akan kaget bila sebuah value pada properti CSS dapat dibuat dengan ekspresi yang menggunakan bahasa scripting, dan potensi kesalahan parsing ini bisa saja muncul. Contoh lain yang ada di blog ini terletak pada trilogi tulisan usaha pencapaian optimasi kecepatan muat halaman dalam error & trial optimasi-CSS, Stupid Modul style-sheets-data CSS dan Cara menyembunyikan CSS. Pada tulisan terpisah tersebut, style-sheets-data CSS diparsing dengan bahasa PHP. back to error message ↑

Lexical error

Kesalahan leksikal. Pesan kesalahan ini mucul karena ditemukannya kesalahan dalam parsing HTML. Perangkat validasi-CSS, jigsaw menggunakan analisa leksikal markah HTML yang mengawali proses penguraian data yang ada pada berkas CSS. Lebih dekat dengan kesalahan leksikal silahkan baca Sintaks Leksikal – Online Report Haskell Organization. back to error message ↑

[angka#1]

[angka#1] dan [angka#2] adalah letak kesalahan markah dalam puisi kode yang dituliskan. back to error message ↑

[angka#2]

baca [angka#1]

[kode-markah#1]

Penyampaian kesalahan markah ini sebenarnya sama mirip dengan pesan kesalahan yang ada pada saat terjadi kegagalan validasi (X)HTML. [kode-markah#1] ini selalu berhubungan dengan [kode-markah#2]. back to error message ↑

[nomor-entitas]

Nomor-entitas, adalah representasi karakter pada [kode-markah#1] yang dituliskan dalam bilangan heksadesimal. Selain menggunakan kode heksadesimal, sebuah karakter dapat juga dituliskan dengan kode alias atau kode entitas. Rujukan ini dapat dibaca pada Referensi Entitas – W3Schools, dan terbatas pada penulisan kode pada WordPress dapat di baca selengkapnya di WordPress Organization – Menulis kode dalam posting. back to error message ↑

[kode-markah#2]

baca [kode-markah#1]

No Style Sheet Found

Halaman penggaya tidak ditemukan. CSS-Validator menggunakan parsing HTML untuk mengambil dan menguraikan style-sheet-data yang ada pada berkas CSS. Apabila terjadi kesalahan parsing yang disebut pada parse-error maka sebenarnya perangkat validasi-CSS tidak dapat melakukan tugas mengambil dan menguraikan style-sheet-data yang ditulis atau yang dikodekan diantara <style>...</style> untuk dianalisa. Untuk pemahaman lebih lanjut tentang jigsaw W3C css-validator, dapat dipelajari pada Diagram CSS Validator – W3 Organization. back to error message ↑

]]> http://side22.com/2010/parse-error-lexical-error-pesan-kesalahan-validasi-markah/feed 19