LOADING

Ketik untuk mencari

Code Teknologi

Script Source Code Blocklinks.Js Untuk Game Candy Crush

guruku
Bagikan

Blocklinks: Membangun Konektivitas di Era Digital

Di era digital yang terus berkembang, konsep ‘blocklink’ telah menjadi topik hangat di kalangan pengembang web dan desainer UX. Blocklink, atau tautan blok, adalah metode yang digunakan untuk membuat seluruh elemen, seperti kartu konten, menjadi klikable dalam desain web. Namun, pendekatan ini membawa tantangan tersendiri, terutama dalam hal aksesibilitas dan pengalaman pengguna (UX).

Pada awalnya, blocklink muncul sebagai solusi untuk meningkatkan keterlibatan pengguna dengan membuat area klik yang lebih besar, sehingga memudahkan interaksi. Metode ini biasanya melibatkan pembungkusan elemen HTML dengan tag `<a>`, sehingga seluruh kartu konten dapat diklik. Namun, praktik ini sering kali menimbulkan masalah bagi pengguna pembaca layar karena kesulitan dalam membedakan konten yang berbeda ketika semuanya terbungkus dalam satu tautan.

Sebagai respons terhadap masalah ini, beberapa solusi telah diajukan. Salah satunya adalah menggunakan teknik CSS `::before` atau `::after` untuk memperluas area klikable tanpa mengorbankan struktur semantik konten. Ini memungkinkan elemen seperti teks dan gambar tetap dapat diakses secara terpisah, sambil menyediakan area klik yang luas untuk keseluruhan kartu.

Namun, solusi ini masih belum sempurna. Masalah seleksi teks tetap ada; pengguna mungkin menemukan kesulitan untuk menyorot dan menyalin teks dari kartu yang memiliki blocklink. Ini menunjukkan bahwa masih ada ruang untuk peningkatan dalam implementasi blocklink yang tidak hanya fokus pada fungsi klik tetapi juga mempertimbangkan aksesibilitas dan kenyamanan pengguna.

Dalam mencari solusi yang ideal, penting untuk mempertimbangkan berbagai aspek, termasuk kebutuhan pengguna pembaca layar, kemudahan navigasi keyboard, dan kemampuan untuk memilih teks. Pendekatan yang mungkin melibatkan penggunaan JavaScript untuk mendeteksi apakah pengguna sedang mencoba untuk memilih teks dan, jika demikian, tidak memicu klik. Namun, pendekatan ini juga membawa kompleksitas tambahan dan harus diuji secara menyeluruh untuk memastikan tidak ada dampak negatif terhadap pengalaman pengguna.

Selain itu, penting untuk mempertimbangkan bagaimana blocklink berinteraksi dengan praktik desain web lainnya, seperti responsivitas dan aksesibilitas. Desainer dan pengembang harus bekerja sama untuk menciptakan solusi yang tidak hanya estetis menarik tetapi juga inklusif dan mudah diakses oleh semua pengguna.

Kesimpulannya, blocklink adalah konsep yang menarik dengan potensi untuk meningkatkan UX, tetapi tantangan yang ada membutuhkan solusi inovatif yang mempertimbangkan semua aspek pengalaman pengguna. Dengan pendekatan yang tepat, blocklink dapat menjadi alat yang kuat dalam membangun konektivitas yang lebih baik dan lebih intuitif di web.

 

Script Halaman Pertama

/**
* WARNING!!!
*
* The below code is tricky and hacky. It is meant as a temporary solution
* to block outgoing links within HTML5 games. It is strongly adviced to not
* use this script, unless you know exactly what you are doing.
*/

Halaman Ke Dua Blocklinks

(function (w, d) {
    'use strict';
    var blockList = [508], // site IDs for which you'd like to block the outgoing links
        addEventListener = (function () {
            var overwrite;
            if (w.addEventListener) {
                overwrite = function (type, listener, element) {
                    element.addEventListener(type, listener, false);
                };



Halaman Ke Tiga Blocklinks

 

 } else if (w.attachEvent) {
                overwrite = function (type, listener, element) {
                    element.attachEvent('on' + type, listener);
                };
            }

 

 

Halaman Ke Empat Blocklinks

return overwrite;
       }()),
       preventDefault = function (e) {
           if (e.preventDefault) {
               e.preventDefault();
           }

           if (e.stopImmediatePropagation) {
               e.stopImmediatePropagation();
           }

           if (e.stopPropagation) {
               e.stopPropagation();
           }

           if (e.stop) {
               e.stop();
           }

           e.returnValue = false;
           return false;
       },

 

Halaman Ke Lima Blocklinks

blockOutgoingLinks = function () {
            var nativeFunctions = {
                'createElement': d.createElement,
                'open': w.open
            };

 

Halaman Ke enam Blocklinks

/**
             * Overwrite the native functions so we can intercept the calls to them
             */

            // func signature: window.open(strUrl, strWindowName[, strWindowFeatures]);

 

Halaman Ke Tujuh Blocklinks

d.createElement = function (tagName) {
                var elementFromMemory = nativeFunctions.createElement.apply(this, arguments);

                if (tagName && 'a' === tagName) {
                    addEventListener('click', function (e) {
                        preventDefault(e);
                    }, elementFromMemory);
                }

                return elementFromMemory;
            };



Halaman Ke Delapan Blocklinks

// func signature: window.open(strUrl, strWindowName[, strWindowFeatures]);
            w.open = function () {
                // just don't do anything
            };
        },
        getUrlParam = function(paramName) {
            var keyvaluePairs = w.location.href.slice(w.location.href.indexOf('?') + 1).split('&'),
                pairsCount = keyvaluePairs.length,
                keyvalueArray,
                value,
                key,
                i;

            for (i = 0; i < pairsCount; i += 1) {
                keyvalueArray = keyvaluePairs[i].split('=');
                key = keyvalueArray[0];
                value = keyvalueArray[1];

                if (key === paramName) {
                    return decodeURIComponent(value);
                }
            }



Halaman Ke Sembilan Blocklinks

 return null;
        },
        indexOf = [].indexOf||(function(a,b,c){for(c=this.length,b=(c+~~b)
        siteId = parseInt(getUrlParam('siteid'), 10);

    // check if we should block the outgoing links based on the site ID query string parameter
    if (siteId && indexOf.call(blockList, siteId) > -1) {
        blockOutgoingLinks();
    }
}(window, window.document));

 

Referensi:
1. Vikas Parashar, “Block Links: The Search For A Perfect Solution,” CSS-Tricks.
2. Chris Coyier, “Block Links Are A Pain (and Maybe Just A Bad Idea),” CSS-Tricks.

Tags:

Anda Mungkin Juga Menyukai

Tinggalkan Komentar

Your email address will not be published. Required fields are marked *

error: Konten dilindungi !!