wikipedia map

خريطة ويكيبيديا

تطبيق ويب لتصور الاتصالات بين صفحات ويكيبيديا. جربه في wikipedia.luk.ke.

الاستخدام

ابدأ بإدخال موضوع في مربع النص ، على سبيل المثال القطط . سيتم إنشاء "عقدة" واحدة ، CAT المسمى ، والتي تظهر كدائرة على الرسم البياني. انقر فوق هذه العقدة لتوسيعها.

يقوم توسيع العقدة بإنشاء عقدة جديدة لكل مقالة ويكيبيديا مرتبطة في الفقرة الأولى من المقالة التي نقرت عليها . سيتم توصيل هذه العقد الجديدة بالعقدة التي تم توسيعها منها. على سبيل المثال ، سيقوم توسيع CAT بإنشاء ثمانية عقد ، بما في ذلك الفراء والثدييات والآلام اللحرية والتدجين ، سيتم توصيل كل منها بـ CAT . يمكن أيضًا توسيع هذه العقد الجديدة بنفس الطريقة. من خلال الاستمرار في توسيع العقد ، يمكنك بناء شبكة معقدة من الموضوعات ذات الصلة.

يمكنك أيضًا إدخال مقالات متعددة "للمقارنة" عن طريق الضغط على فاصلة أو علامة تبويب أو إدخال بعد كل مقالات تدخلها.

كيف تعمل

API

عند النقر لتوسيع عقدة ، يتم تقديم طلب إلى واجهة برمجة تطبيقات ويكيبيديا لتنزيل المحتوى الكامل لمقال ويكيبيديا المقابل لتلك العقدة. تستخدم خريطة ويكيبيديا هذه البيانات للعثور على الروابط في الفقرة الأولى من المقالة.

HTML تحليل

يستخدم wikipedia_parse.js API DOMParser لتحليل HTML صفحات ويكيبيديا (تم استرجاعه من المكالمات إلى واجهة برمجة تطبيقات ويكيبيديا). يبحث المحللون عن علامة <p> المقابلة للفقرة الأولى من المقالة ، ثم يستخرج جميع روابط العلامة <a> داخل هذه الفقرة. ثم يقوم بتصفية الروابط لتشمل فقط تلك التي ترتبط بمقالات ويكيبيديا الأخرى.

يمكنك أن ترى هذا في العمل بنفسك في وحدة التحكم في متصفحك. إذا كنت قد فتحت خريطة ويكيبيديا ، فافتح أدوات مطور المستعرض الخاصة بك ونوعها await getSubPages('Cat') . بعد ثانية ، يجب أن ترى صفيفًا بأسماء المقالات الأخرى ذات الصلة.

الرسم البياني

يستخدم الواجهة الأمامية vis.js لعرض الرسم البياني. في كل مرة يتم فيها النقر فوق العقدة ، يقوم التطبيق بعمل XMLHttpRequest إلى خادم Node.js. تتم إضافة الروابط الناتجة كعقد جديدة ، ملونة وفقًا لمسافة العقدة المركزية (كما هو موضح أعلاه).

استنساخ

لاستخدام التطبيق محليا ، ببساطة

git clone https://github.com/controversial/wikipedia-map/

وفتح index.html في متصفح الويب. لا يوجد تجميع أو خادم ضروري لتشغيل الواجهة الأمامية.

خيارات التصميم

وظيفية

يقوم توسيع العقدة بإنشاء عقد لكل مقالة مرتبطة في الفقرة الأولى من المقالة للعقدة التي توسعها. لقد اخترت استخدام الروابط فقط من الفقرة الأولى من مقال لسببين:

1. عادة ما يكون هناك عدد يمكن التحكم فيه من هذه الروابط ، حوالي 5-10 لكل صفحة.
2. تميل هذه الروابط إلى أن تكون ذات صلة بشكل مباشر بالمقالة أكثر من الروابط لأسفل في الصفحة.

مرئي

العقد أخف في اللون عندما تكون بعيدة عن العقدة المركزية. إذا استغرق الأمر 5 خطوات للوصول إلى اليونانية القديمة من البطريق ، فسيكون لونه أخف من عقدة مثل الطيور ، والتي استغرقت خطوتين فقط للوصول إليها. وبالتالي ، يشير لون العقدة إلى مدى ارتباط مقال بالموضوع المركزي.

يحوم الماوس فوق العقدة سوف يسلط الضوء على المسار إلى العقدة المركزية: هذا ليس بالضرورة أقصر مسار. إنه المسار الذي اتخذته للوصول إلى العقدة.

خريطة الطريق

الأشياء التي أرغب في تنفيذها قريبًا (ISH)

واجهة

• بناء واجهة المستخدم الرسومية
  • تغيير طريقة الإدخال إلى شيء آخر غير موجه
  • السماح للبدء من جديد دون تحديث الصفحة
  • قم بإنشاء زر معلومات صغيرة يفسر المشروع ، أو عناصر التحكم ، وما إلى ذلك.
    • جعل هذا Readme في مربع الحوار المساعدة
    • يجب أن تحتوي المنطقة ذات الشبكة على تعليمات عندما تكون فارغة
    • قم بإنشاء مربع حوار مساعدة أكثر شمولاً يشرح عناصر التحكم ، وما إلى ذلك ، والذي يتضمن أيضًا ReadMe
  • أضف زر "مقالة عشوائية"
  • قم بإنشاء قائمة مساعدة أفضل تظهر عند زيارة المستخدم لأول مرة.
  • اجعل الجولة أفضل
    • أظهر للمستخدمين كيفية التوسع وتتبع العقد. للقيام بذلك ، قم بإنشاء Div غير المرئي العائم خلال عقدة البداية. ثم ، قم بتثبيت خطوة الراعي لهذا DIV.
    • لا تسمح للمستخدمين بالتقدم إلى الخطوة التالية حتى يتبعوا التعليمات (إدخال المقالات ، والضغط على GO)
    • تختفي مربع المعلومات عند بدء الجولة
• السماح بإدخال بدايات متعددة
  • بناء واجهة لهذا
• تنفيذ توفير + مشاركة
  • حفظ الرسم البياني
  • تحميل رسم بياني من معرف
  • تحميل رسم بياني من معلمة عنوان URL
  • تنفيذ مشاركة واجهة المستخدم

تفاعل

• سيظهر تحوم فوق عقدة تتبعًا لكيفية وصولك إلى تلك العقدة ، نوعًا ما مثل فتات الخبز
• تحسين الأجهزة المحمولة: قم بتنفيذ مجموعة منفصلة من عناصر التحكم في أجهزة اللمس
• على كل من سطح المكتب والهاتف المحمول ، انقر نقرًا مزدوجًا (أو انقر) عقدة لفتح صفحة ويكيبيديا المقابلة في علامة تبويب جديدة
• تحسين كفاءة تسليط الضوء على العقد

اِصطِلاحِيّ

• .gitignore -ify دليل المكتبات ، لا يوجد سبب لوجوده هنا عندما لم أكتب هذه الأشياء
• إزالة التبعية على بعض المكتبات الخارجية:
  • jQuery
  • WordWrap
  • TinyColor
• انقل JavaScript لفصل الملفات عن HTML
• جعل طلبات API غير متزامنة
• أضف نوعًا من نظام البناء لجعل بناء نسخ محلية والمساهمة أسهل

الأشياء قد يكون من الجيد تنفيذها في وقت ما في المستقبل البعيد

• أسماء الإكمال التلقائي لمقالات ويكيبيديا في الشريط العلوي
• جعل حجم العقد يعكس عدد الروابط الخلفية
• دعم اللغات الأخرى
• الدعم ل mediawiki الويكي الأخرى

الاعتمادات

هذا المشروع مدعوم من ويكيبيديا ، التي تجعل ثروة المعلومات من هذا المشروع ممكنة.

يتم تشغيل عرض الرسم البياني بواسطة vis.js