About

Planet Bloggerian adalah aggregator daripada tulisan-tulisan members Forum Bloggerian.

Subscribe

Untuk mendaftar, menghubungi kami, kasih kritik, saran dll, silakan isi Contact Form.

Desclaimer

The intellectual property of the content that is found in this website belongs exclusively to the origin authors.

Statistics

Bloggerian Top Hits

Feeds

3653 items (3649 unread) in 34 feeds

Aban

  • Unit PNG Fix: Alternatif Siasat untuk Mengatasi Masalah PNG Transparan pada IE 6

    Posted: August 3rd, 2010, 7:14pm WIT by Aban Nesta
    TagsWebby  

    Tempo hari, saya pernah membahas mengenai PNG Transparan untuk Windows IE 5.5 dan 6. Di situ saya menggunakan jquery.pngFix.js untuk mengatasi permasalahan transparansi file PNG untuk IE 6 ke bawah. Namun ternyata, siasat tersebut terbentur ketika kita menggunakan file png untuk background repeat.
    Setelah saya coba cari lagi, saya menemukan solusi yang terbaik (saat ini) untuk mengatasi permasalahan png transparan pada IE 6 ke bawah ini, yaitu unitpngfix.
    Berikut adalah beberapa fakta, mengapa saya merekomendasikan unitpngfix ini:

    • Javascript yang dipakai terbilang ringan (kurang dari 2kb!).
    • Menyelesaikan masalah yang diakibatkan oleh atribut filter IE.
    • Bisa diimplementasikan untuk objek img dan background-
    • image.
    • Berjalan secara otomatis sebelum halaman di-load untuk semua elemen atau elemen tertentu.
    • Bisa dipakai untuk elemen auto width dan auto height.
    • Mudah dalam hal deployment atau teknis pemakaiannya.
    Demo

    Contoh PNG

    Petunjuk Pemakaian
    1. Unduh file unigpngfix.zip di sini.
    2. Sisipkan tag berikut pada header (antara tag <head> dan </head>)
      <!--[if lt IE 7]>
              <script type="text/javascript" src="unitpngfix.js"></script>
      <![endif]-->
      
    3. Unggah file clear.gif ke folder images Anda. Bukalah unitpngfix.js lalu sesuaikan path dengan directory tempat file clear.gif diunggah.
    4. Secara default, unigpngfix akan bekerja pada semua gambar PNG di halaman situs Anda, namun jika dibutuhkan untuk beberapa elemen tertentu, Anda cukup menambahkan class="unitPng" pada elemen yang dibutuhkan. Penambahan class tersebut akan membuat unigpngfix hanya bekerja pada elemen yang memiliki class tersebut.

    That’s it! Mulai sekarang Anda tidak akan menganggap Internet Explorer “hanya” sebagai tool untuk mengunduh Mozilla Firefox saja :p

    Note:
    Bagi pengguna wordpress, Unit PNG Fix ini sudah bisa digunakan dalam bentuk plugin (Unduh di sini).

    Permalink for 'Aban/2010/08/03/Unit_PNG_Fix__Alternatif_Siasat_untuk_Mengatasi_Masalah_PNG_Transparan_pada_IE_6'
  • Mengimplementasikan @font-face

    Posted: July 13th, 2010, 7:44am WIT by Aban Nesta
    TagsWebby  

    FontsSaya sering mendapatkan klien yang menyodorkan draft desain website mereka (dari paling sederhana dalam bentuk .ppt sampai dengan format .psd). Rata-rata mereka sangat “kreatif” dalam hal penggunaan font sebagai typografi mereka. Ketika saya jelaskan kaidah penggunaan font di website, rata-rata mereka cukup bisa untuk berkompromi dan akhirnya mengembalikan jenis font ke jenis yang “diizinkan”.

    Tapi sebenarnya, saya bisa memenuhi permintaan mereka dengan memanfaatkan @font-face. Relatif bukan hal yang baru memang, karena @font-face sudah diajukan untuk standarisasi CSS2 dan bahkan sudah diimpelementasikan di Internet Explorer versi 5, meskipun implementasinya menggunakan format Embedded Open Type (.eot) yang notabene tidak semua browser menggunakan format tersebut.

    OK, sekarang bagaimana cara kita memasang kaidah @font-face dalam blog/website kita?

    Pertama, perlu diingat format font apa saja yang di-support oleh browser-browser yang ada.

    • Internet Explorer (semua versi): EOT
    • Safari (3.2+): TTF/OTF
    • iPhone (3.1) SVG
    • Chrome (semua versi): SVG (TTF/OTF supported sejak 25 Januari 2010)
    • Firefox (3.5+): TTF/OTF (.WOFF sejak versi 3.6)
    • Opera (10+) TTF/OTF

    So, .eot + .ttf /.otf + svg + woff adalah format-format yang banyak di-support oleh browser. Artinya, ketika kita hendak menggunakan kaidah @font-face, sangat disarankan agar kita menyertakan format-format tersebut. Anda bisa memanfaatkan @font-face generator untuk meng-generate font pilihan dari komputer Anda (harap diperhatikan juga mengenai lisensi font yang akan Anda gunakan). Unggahlah file font yang akan Anda gunakan.

    Kedua, syntax yang digunakan untuk implementasi @font-face:

    @font-face {
      font-family: NamaFont; /* required */
      src: source;	/* required */
      font-weight: weight;	/* optional */
      font-style: style;  /* optional */
    }
    

    NamaFont
    Nama font yang akan dipanggil untuk properti CSS kita.
    source
    URL tempat font tersebut kita simpan, bisa juga ditambahkan dengan local("NamaFontLokal"), dengan NamaFontLokal adalah nama yang terbaca oleh komputer lokal kita.
    weight
    Font weight value, misalnya bold atau normal.
    style
    Font style value, misalnya italic atau normal.

    Note: Syntax CSS ini bisa digunakan berulang, jika kita menggunakan lebih dari 1 jenis font.

    Ketiga, panggillah nama font tadi sesuai kebutuhan, misalnya:

    h1{
       font-family: 'NamaFont', arial, serif;
    }
    

    Note: Tetap disarankan untuk menyertakan jenis font standar lain sebagai alternatif.

    Untuk lebih jelasnya, Anda bisa membaca juga artikel-artikel berikut ini:

    Permalink for 'Aban/2010/07/13/Mengimplementasikan__font_face'