نقشه وب چیست؟نقشه های آنلاین در خدمت رفاه بشری

1. تعاریف
2. نقشه وب چیست؟
3. ساخت نقشه وب
4. ملاحظات طراحی

1. تعاریف

نقشه وب : نقشه ای که معمولاً به عنوان بخشی از یک صفحه وب منتشر شده و از طریق اینترنت قابل دسترسی است. نقشه های وب به یکی از دو دسته تقسیم می شوند:

نقشه‌های وب استاتیک ، تصاویر نقشه‌ای هستند که در مرورگر ارائه می‌شوند و ورودی‌های کاربر را تغییر نمی‌دهند. اینها شامل تصاویر نقشه است که کاربر می تواند از طریق عملکرد زوم در مرورگر بدون تغییر خود تصویر، مقیاس آنها را افزایش یا کاهش دهد.

نقشه‌های وب پویا، نقشه‌های وب هستند که با مشاهده کاربر تغییر ظاهر می‌دهند. دو نوع زیر از نقشه های پویا وجود دارد:

نقشه های وب متحرک اغلب و به طور خودکار تغییر می کنند و از زمان برای نمایش یک یا چند ویژگی داده استفاده می کنند. نقشه‌های متحرک ممکن است شامل تعامل باشند یا نباشند، اما اغلب حداقل شامل کنترل‌هایی هستند که به کاربر اجازه می‌دهد تا مکث، پخش و تنظیم نقطه شروع انیمیشن را انجام دهد.

نقشه های وب تعاملی در پاسخ به ورودی کاربر تغییر می کنند. امروزه به دلیل فراگیر شدن این نوع نقشه در اینترنت، بسیاری از مردم به طور اتفاقی “نقشه های وب” را مترادف با نقشه های وب تعاملی می دانند.

نقشه وب کاشی‌شده ( نقشه لغزنده ): یک نقشه وب تعاملی که از کاشی‌های تصویر یا داده‌های ارسال شده به مرورگر کاربر در صورت درخواست استفاده می‌کند و امکان بزرگ‌نمایی و جابجایی صاف و بدون وقفه را فراهم می‌کند. 

mashup : ترکیبی از مجموعه ای از کاشی های نقشه با یک یا چند همپوشانی داده از منبع یا منابعی متفاوت از مجموعه کاشی.

رابط برنامه‌نویسی کاربردی (API) : مجموعه‌ای از دستورالعمل‌ها که برنامه‌ها برای برقراری ارتباط با یکدیگر استفاده می‌کنند و اغلب در اسناد آنلاین قابل خواندن برای انسان منتشر می‌شوند.

API نقشه‌برداری وب تجاری :  کتابخانه‌ای از دستورالعمل‌های کد که عمدتاً یا منحصراً برای دسترسی به یک سرویس نقشه‌برداری وب اختصاصی مفید است.

API نقشه‌برداری وب منبع باز : کتابخانه‌ای از دستورالعمل‌های کد که با یک سرویس خاص طراحی نشده است و هر توسعه‌دهنده‌ای می‌تواند آزادانه آن را مطابق با اهداف خود تغییر دهد.

برنامه غنی اینترنت (اپلت) :  یک برنامه شخص ثالث که برای کامپایل و اجرای برنامه های باینری در مرورگر طراحی شده است. برنامه های کاربردی اینترنتی غنی به سرعت به نفع فناوری های وب باز ناپدید می شوند. 

معماری مشتری-سرور : سیستمی که به رایانه ها اجازه می دهد با یکدیگر در سراسر شبکه ارتباط برقرار کنند، که در آن یک برنامه رایانه ای (سرور) محتوا را ذخیره می کند و به یک برنامه دریافت کننده (کلاینت) تحویل می دهد.

سرور : یک نرم افزار نصب شده بر روی یک کامپیوتر یا گروهی از کامپیوترها که اطلاعات ذخیره شده در ماشین محلی را به یک دستگاه راه دور ارسال می کند.

کلاینت : نرم افزار نصب شده بر روی کامپیوتر که درخواست ها را به سرور ارسال می کند و اطلاعات را از آن دریافت می کند.

Document Object Model (DOM) : مجموعه ای از عناصر، ویژگی ها، سبک ها، داده ها و اشیاء اسکریپت و رویه هایی که برای مشاهده یک صفحه وب در مرورگر استفاده می شود.

سرور نقشه: یک وب سرور تخصصی که برای انتشار خدمات وب جغرافیایی استفاده می شود.

خدمات وب جغرافیایی :  داده ها، تصاویر نقشه، و خدمات پردازشی که در زمان واقعی توسط یک سرور نقشه در دسترس قرار می گیرند، معمولاً مطابق با استانداردهای تعیین شده توسط کنسرسیوم فضایی باز (OGC).

کاشی های برداری تکه‌های کوچکی از داده‌های برداری که هر کدام منطقه جغرافیایی یک کاشی نقشه را پوشش می‌دهند که با مجموعه‌ای جداگانه از دستورالعمل‌های سبک ارائه می‌شود که برای نمایش هر کاشی در مرورگر استفاده می‌شود.

انیمیشن توقف فریم :  انیمیشنی که با نمایش تعداد زیادی عکس (یا فریم) به صورت متوالی ایجاد می شود.

tweening : انتقال صاف بین حالت های نقشه که به صورت برنامه نویسی (یعنی از طریق کد) اجرا می شود.

تعامل: مکالمه بین کاربر و نقشه با واسطه مشتری.

رابط کاربری (UI) : مجموعه ای از عناصر موجود در صفحه که کاربر می تواند ببیند و/یا دستکاری کند.

AJAX (جاوا اسکریپت ناهمزمان و Xml) :  مجموعه‌ای از رویه‌ها که به مشتری اجازه می‌دهد بدون نیاز به بارگیری مجدد کل صفحه وب، درخواست‌هایی را به سرور ارسال کند و داده‌ها را در پاسخ به ورودی کاربر دریافت کند.

سلسله مراتب بصری :  تسلط بصری نسبی اشیاء بر روی نقشه، با اشیاء مهم‌تر از نظر بصری غالب هستند.

سلسله مراتب بصری قوی :  اشیاء روی نقشه دارای تضاد مشخص هستند و ترتیب اهمیت بسیار قابل تشخیصی دارند.

سلسله مراتب بصری ضعیف/مسطح :  اشیاء روی نقشه از نظر بصری قابل مقایسه هستند و از نظر اهمیت نسبی به سختی مرتب می شوند.

طراحی بیش از حد : گنجاندن اطلاعات بیش از حد، عناصر بصری بیش از حد، یا تعامل بیش از حد با توجه به هدف نقشه، که منجر به شلوغی و کاهش قابلیت استفاده می شود.

طرح‌بندی نقشه :  آرایش بصری عناصر رابط کاربری (UI) روی نقشه وب و اطراف آن.

ترکیب نقشه :  روشی که در آن نقشه های وب به صورت بصری ساختار یافته اند تا اطلاعات خاصی را به کاربر منتقل کنند.

طراحی وب ریسپانسیو : مجموعه ای از تکنیک ها برای اصلاح طرح بندی محتوای صفحه وب به منظور انطباق با اندازه و زمینه نمایش کاربر.

دسترسی : اصل حصول اطمینان از اینکه افرادی که دارای معلولیت هستند، مسن تر هستند، یا در مناطق روستایی یا کشورهای در حال توسعه زندگی می کنند، می توانند از وب سایت ها و برنامه های کاربردی وب استفاده کنند.

2. نقشه وب چیست؟

2.1 نقشه های وب استاتیک در مقابل پویا

اولین نقشه های وب، نقشه های چاپ شده بودند که به سادگی اسکن شده و در اوایل سال 1993 به اینترنت ارسال شدند، زمانی که معرفی مرورگر وب موزاییک به کاربران اولیه اینترنت اجازه داد برای اولین بار تصاویر را مشاهده کنند (پیترسون، 2008). تصاویر نقشه اسکن شده هنوز هم نوع رایج نقشه وب هستند. اغلب این اسناد به صورت اسناد Adobe PDF ارائه می شوند یا در یک قاب مشاهده قرار می گیرند که به کاربر اجازه می دهد برای مشاهده جزئیات بیشتر قسمت هایی از نقشه را بزرگنمایی کند (پترسون، 2014). با این حال، در سال‌های اخیر، توجه فزاینده‌ای به محدودیت‌های طراحی نمایشگرهای رایانه و مرورگرهای وب معطوف شده است، و در حال حاضر مجموعه‌ای از دستورالعمل‌های طراحی برای نقشه‌های دیجیتال وجود دارد که از دستورالعمل‌های مربوط به نقشه‌های چاپی جدا شده است (به عنوان مثال، جنی و همکاران، 2008). موهلنهاوس، 2014؛ تولوچکو، 2016). خواه ابتدا چاپ شود و سپس اسکن شود یا در رایانه برای مصرف دیجیتال ایجاد شود،نقشه وب استاتیک (شکل 1) .

شکل 1: بخشی از یک نقشه استاتیک که برای وب قالب بندی شده است. نقشه کامل بسیار طولانی است (1097×8032 پیکسل) تا اسکرول عمودی در یک صفحه وب را تسهیل کند. نقشه توسط Gregor Aisch و KK Rebecca Lai، از نیویورک تایمز، آخرین بار در 7 فوریه 2017 به روز شد. با اجازه تجدید چاپ شد. 

توسعه نقشه های وب پویا به موازات گسترش نقشه های وب استاتیک صورت گرفته است. نقشه های وب پویا ظاهر خود را تغییر می دهند، یا به طور مکرر و خودکار برای نشان دادن تغییر در یک پدیده ( نقشه های وب متحرک ؛ شکل 2) یا به طور دلخواه در پاسخ به ورودی کاربر ( نقشه های وب تعاملی ) (راث، 2013). وب سایت Map Viewer که در سال 1994 توسعه یافت، به کاربر این امکان را می داد که یک نقشه منحصر به فرد با محوریت یک نقطه خاص درخواست کند (پترسون، 2014). در سال 1996، MapQuest نقشه‌ای را معرفی کرد که کاربران می‌توانستند آن را بزرگ‌نمایی و کوچک‌نمایی کنند و با هر درخواست یک صفحه وب جدید با نمای نقشه جدید بارگیری کنند. حدود یک دهه بعد، MapQuest توسط گوگل تحت الشعاع قرار گرفت و نقشه وب کاشی شده را در سال 2005 معرفی کرد.

شکل 2: یک نقشه وب متحرک از مسیرهای پرواز که توسط هواپیماهای نظارتی دولتی گرفته شده است. نقشه اصلی نیز برخی از تعاملات را ارائه می دهد. نقشه توسط Peter Aldhous، از BuzzFeed News ، 6 آوریل 2016. تجدید چاپ با اجازه. 

2.2 نقشه های وب کاشی شده و mashup

نقشه‌های وب کاشی‌شده ، که به آن‌ها نقشه‌های لغزنده نیزبا برش داده‌ها یا تصویر نقشه به کاشی‌های 256 در 256 پیکسل و ارسال کاشی‌ها به مرورگر کاربر همانطور که مرورگر درخواست می‌کند، امکان جابجایی و بزرگنمایی بدون وقفه را فراهم می‌کند (Peterson, 2012; شکل). 3). این درخواست‌های زنده از طریق AJAX (جاوا اسکریپت ناهمزمان و XML) انجام می‌شوند ، مجموعه‌ای از روال‌های محاسباتی که به مشتری اجازه می‌دهد بدون بارگیری مجدد صفحه وب، داده‌ها را از سرور دریافت کند و تعامل با نقشه را روان و شهودی می‌کند. نقشه های کاشی شده در میان محبوب ترین انواع نقشه های وب باقی می مانند.

شکل 3. یک کاشی نقشه از OpenStreetMap، یک نقشه مرجع کاشی کاری شده که از داده های صدها هزار مشارکت کننده تشکیل شده است. 

گوگل همراه با نقشه‌های وب کاشی‌شده، پیش‌بینی Web Mercator (یا Spherical Mercator) را اختراع و استاندارد کرد، که هنوز هم تقریباً توسط همه مجموعه‌های کاشی استفاده می‌شود. این طرح به دلیل محاسبات ساده، مستطیل بودن آن (که به نقشه اجازه می دهد پیوسته از شرق به غرب باشد) و تطابق، که اعوجاج شکل را در مقیاس های بزرگ کاهش می دهد، مفید است (Muehlenhaus, 2014). با این حال، دقت کمتری نسبت به پیش‌بینی‌های بیضی‌شکل دارد و نواحی با عرض جغرافیایی بالا را در مقیاس جهانی به شدت تحریف می‌کند، که منجر به نگرانی‌هایی در مورد تأثیر آن بر نحوه تصور مردم از شکل سیاره و تفسیر داده‌های منطقه‌ای می‌شود (باترزبی و همکاران، 2014).

ظهور نقشه وب کاشی کاری شده اندکی پس از اولین mashup انجام شد. با مهندسی معکوس وب‌سایت Google Maps، «هکرهای نقشه» متوجه شدند که چگونه داده‌های جاهای دیگر را در بالای کاشی‌های تصویر Google قرار دهند (Crampton، 2010). گوگل با انتشار آشکار رابط برنامه نویسی برنامه خود (API) پاسخ داد ، مجموعه ای از دستورالعمل هایی که برنامه ها برای برقراری ارتباط با یکدیگر استفاده می کنند (Muehlenhaus، 2014). در حالی که لایه‌های باز به زودی به عنوان یک جایگزین غیرتجاری توسعه یافت، Google Maps API پرمصرف‌ترین مولد mashup باقی ماند تا اینکه گوگل استفاده بدون پرداخت خود را در سال 2011 محدود کرد. در آن زمان، جایگزین‌های منبع باز به سرعت محبوبیت پیدا کردند.

2.3 برنامه های کاربردی اینترنتی غنی و نقشه های وب برداری

قبل از ظهور نقشه‌های وب کاشی‌شده، نقشه‌نگارانی که به دنبال انیمیشن و تعامل روان بودند، شروع به ساختن نقشه‌ها با استفاده از برنامه‌های کاربردی اینترنتی غنی یا برنامه‌های باینری شخص ثالثی که در مرورگر به عنوان یک افزونه تعبیه شده بودند (اغلب اپلت نامیده می‌شوند) کردند.). رایج ترین آنها برای نقشه برداری Flash بود که توسط Macromedia در سال 1997 توسعه یافت و بعداً توسط Adobe خریداری شد (Peterson, 2008). با دانلود و کامپایل کردن به عنوان یک بسته اجرایی واحد، برنامه‌های ساخته شده با Flash می‌توانند بر محدودیت‌های پهنای باند مودم‌های 56K غلبه کنند تا تجربه کاربری روانی را با ارائه با کیفیت بالا از گرافیک‌های سفارشی فراهم کنند (Roth et al., 2014). نقشه های فلش تا اوایل دهه 2010 رایج بود، زمانی که سازندگان سیستم عامل تلفن همراه اعلام کردند که دیگر از برنامه های شخص ثالث در مرورگرهای تلفن همراه پشتیبانی نمی کنند و جامعه توسعه وب به سمت تکیه بر فناوری های وب باز که به صورت بومی توسط مرورگرها پیاده سازی می شوند حرکت کردند (Adobe Corporate Communications، 2015).

با از بین رفتن اپلت‌ها، نقشه‌نگاران هم به نقشه‌های وب کاشی‌شده روی آوردند و هم شروع به جستجوی جایگزین‌هایی کردند که به مجموعه‌های کاشی مبتنی بر Web Mercator متکی نبودند. استاندارد SVG (گرافیک برداری مقیاس پذیر) راهی را برای ترسیم و استایل دادن به نقشه ها ارائه می کند که همچنان می توانند مستقیماً در مرورگر پویا و تعاملی باشند. اگرچه پذیرش آن توسط برخی از مرورگرها چندین سال طول کشید و سرعت رندر آن در ابتدا ضعیف بود، SVG اکنون توسط همه مرورگرهای اصلی پشتیبانی می‌شود و پهنای باند و پردازنده‌های گرافیکی بهبود یافته تجربه کاربری آن را با نقشه وب کاشی‌شده رقابتی کرده است (Peterson, 2008). . عنصر جدیدتر HTML Canvas از رندر سریعتر خط برداری پشتیبانی می کند، اما گرافیک را به عنوان یک تصویر شطرنجی پس از رندر شدن در نظر می گیرد (Lienert et al., 2012). صحنه های تعامل و سه بعدی را می توان با استفاده از WebGL به Canvas اضافه کرد.

شکل 4. یک نقشه وب بردار تعاملی که امکان کاوش در سیاهههای مربوط به کاپیتان کشتی های تاریخی را فراهم می کند. نقشه توسط اسکات فارلی، استار ماس، و مگان کلی. تجدید چاپ با اجازه. 

3. ساخت نقشه وب

3.1 معماری سرویس گیرنده-سرور

مانند تمام محتوای وب، نقشه های وب از مدل معماری مشتری-سرور پیروی می کنند (پترسون، 2014). سرور قطعه ای از نرم افزار نصب شده بر روی یک کامپیوتر یا گروهی از کامپیوترها است که اطلاعات ذخیره شده در ماشین محلی را به یک دستگاه راه دور یا کلاینت ارسال می کند.سرور همچنین درخواست ها و داده ها را از مشتری دریافت می کند، محاسبات را انجام می دهد و داده ها را در حافظه دستگاه خود می نویسد. هر سرور آدرس IP ثابت (پروتکل اینترنت) خود را دارد، رشته ای از اعداد که توسط آن کلاینت آن را تعیین می کند. کلاینت – یک مرورگر یا برنامه ذخیره شده در دستگاه کاربر – با برقراری تماس با آدرس IP سرور (معمولاً از طریق آدرس سرور نام دامنه (DNS)، به عنوان مثال، www-dot، اطلاعات ذخیره شده در دستگاه سرور را درخواست می کند. -example-dot-com). سرور اسناد HTML، شیوه نامه های CSS، دستورالعمل های برنامه جاوا اسکریپت و سایر داده ها و تصاویر ضروری ذخیره شده در فهرست وب سایت را به مشتری برمی گرداند. سپس مشتری این داده ها و دستورالعمل ها را در صفحه وب مشاهده شده توسط کاربر جمع آوری می کند.

کلمه “سرور” به مخفف یک کامپیوتر پرقدرت تبدیل شده است، که اغلب در یک مرکز داده با صدها ماشین مشابه دیگر قرار دارد (پترسون، 2014). به عبارت دقیق‌تر، سرور نرم‌افزاری است که می‌تواند روی هر رایانه‌ای، حتی رایانه شخصی یا لپ‌تاپ خانگی، قرار گیرد و محتوای یک فهرست خاص در آن رایانه را برای شبکه قابل مشاهده می‌کند. محبوب ترین سرورها در حال حاضر Apache، NGINX، Google Web Server و IIS مایکروسافت (Netcraft، 2017) هستند.

در سمت کلاینت، مرورگر صفحات را رندر می کند و برنامه های ارسال شده به آن را با استفاده از Document Object Model (DOM) اجرا می کند . راث، 2017). علاوه بر مجموعه فعلی مرورگرهای وب با امکانات کامل (Firefox، Chrome، Internet Explorer/Edge، Safari و Opera)، نقشه‌های وب به طور فزاینده‌ای در دستگاه‌های تلفن همراه با استفاده از برنامه‌های توسعه‌یافته برای بهره‌برداری از یک سرویس اینترنتی خاص مشاهده می‌شوند. Google Maps و Apple Maps شناخته‌شده‌ترین برنامه‌های نقشه هستند، اما بسیاری از برنامه‌های دیگر نیز وجود دارند، و نقشه‌نگاران با مهارت‌های اولیه کدنویسی می‌توانند برنامه‌های خود را برای توزیع از طریق فروشگاه‌های اپلیکیشن سازندگان سیستم‌عامل بسازند (Muehlenhaus، 2014).

اجزای اساسی یک نقشه وب عبارتند از داده ها، نمایش داده ها با استفاده از اطلاعات سبک، و در صورت یک نقشه پویا، انیمیشن یا تعامل (Donohue, 2014) . هر کدام به نوبه خود در زیر پوشش داده خواهد شد.

3.2 داده ها

داده ها بر روی دستگاه سرور میزبانی می شوند. داده های برداری که برای نمایش پویا نقشه های وب استفاده می شوند، اغلب در یک پایگاه داده ذخیره می شوند. رایج ترین سیستم های مدیریت پایگاه داده مورد استفاده برای وب (MySQL، PostgreSQL، Microsoft SQL، و Oracle) همگی دارای پسوندهای مکانی هستند که امکان ذخیره داده های برداری جغرافیایی و همچنین توانایی متفاوتی برای انجام پردازش جغرافیایی سمت سرور با داده ها را فراهم می کند. (Lienert و همکاران، 2012). داده های برداری نیز ممکن است در یک فایل روی سرور ذخیره شوند یا از یک پایگاه داده به فرمت فایل برای انتقال تبدیل شوند. توجه به این نکته مهم است که داده‌های برداری مورد استفاده در نقشه‌های وب معمولاً شامل اطلاعات پیش‌بینی نمی‌شوند ، زیرا اکثر APIهای نقشه‌برداری وب، داده‌ها را در برنامه مشتری نمایش می‌دهند، و داده‌های از پیش پیش‌بینی‌شده می‌توانند نتایج نامفهومی ایجاد کنند.

تصاویر نقشه شطرنجی (از جمله کاشی های شطرنجی) تقریباً همیشه به عنوان فایل های جداگانه در یک ساختار دایرکتوری ساده ذخیره می شوند. جدول 1 فرمت های رایج فایل برداری و شطرنجی را برای وب فهرست می کند (همچنین به  فرمت ها و منابع رستر و قالب ها و منابع  برداری رجوع کنید ).

3.3 نمایندگی

جنبه نمایش نقشه وب نحوه مشاهده و تفسیر اطلاعات نقشه‌برداری شده توسط کاربر است (Donohue, 2014). این شامل استفاده از اطلاعات سبک به داده ها برای ارائه یک تصویر نقشه قابل مشاهده است. این رندر ممکن است در سمت سرور یا مشتری انجام شود.

در مورد تصاویر نقشه شطرنجی، اطلاعات سبک در تصویر ارائه شده توسط سرور گنجانده شده است. تصاویر نقشه ممکن است فایل هایی از قبل موجود باشند یا توسط یک سرور نقشه تخصصی با استفاده از شیوه نامه Styled Layer Descriptor (SLD) ارائه شوند (Lienert et al., 2012). سرورهای نقشه را می توان به گونه ای تنظیم کرد که طبق درخواست مشتری، تصاویر را در لحظه ارائه کند، یا هر تصویر را یک بار رندر کرده و در یک کش سمت سرور ذخیره کند. کاشی‌های شطرنجی برای نقشه‌های کاشی‌شده معمولاً با استفاده از رویکرد دوم ایجاد می‌شوند. MapServer، Geoserver و QGIS Server سرورهای نقشه منبع باز محبوب هستند، در حالی که ArcGIS Server پرکاربردترین سرور نقشه تجاری است.

سرورهای نقشه داده ها و تصاویر را به عنوان خدمات وب جغرافیایی منتشر می کنند . کنسرسیوم فضایی باز (OGC) مجموعه ای از استانداردها را برای خدمات وب جغرافیایی، که در جدول 2 با نام هر سرویس مرتبط با اسناد آن در وب سایت OGC فهرست شده است، حفظ می کند. این استانداردها به مشتریان اجازه می‌دهند تا داده‌ها و عملیات سرور نقشه را برای ایجاد یک نتیجه سفارشی جستجو کنند و بلافاصله با تغییراتی در داده‌های زیربنایی به‌روزرسانی می‌شوند و امکان نمایش نقشه‌برداری بلادرنگ پدیده‌های در حال تغییر را فراهم می‌کنند (Cerba & Cepicky، 2012).

برای هر دو نقشه برداری استاتیک و پویا، اطلاعات سبک به طور جداگانه از داده ها منتقل شده و توسط مشتری ارائه می شود. در مورد گرافیک های SVG، اطلاعات سبک ممکن است در فایل SVG گنجانده شود، یا توسط دستورالعمل های جداگانه نوشته شده در CSS یا جاوا اسکریپت یا ترکیبی اعمال شود (Muehlenhaus، 2014). همچنین ممکن است یک SVG از ابتدا در کلاینت با استفاده از منابع داده و دستورالعمل‌های جداگانه در کد جاوا اسکریپت ساخته شود، مانند همه نقشه‌هایی که با استفاده از Canvas ترسیم می‌شوند (Lienert et al., 2012). نقشه‌های کاشی‌شده ممکن است از کاشی‌های برداری استفاده کنند که شامل تعداد زیادی تکه‌های کوچک از داده‌ها است که منطقه جغرافیایی یک کاشی را پوشش می‌دهد و یک مجموعه جداگانه از دستورالعمل‌های سبک که برای نمایش هر کاشی در مرورگر استفاده می‌شود (Turner, 2015).

3.4 انیمیشن و تعامل

مؤلفه نهایی یک نقشه وب پویا، انیمیشن یا تعاملات نقشه است که در سمت مشتری اجرا می شود. دو نوع اساسی از نقشه های وب متحرک وجود دارد (Muehlenhaus، 2014). Stop-Frame Animation از طریق یک ویدیو یا فایل تصویر GIF ارائه می شود که از بسیاری از تصاویر (یا فریم ها) منفرد تشکیل شده است که به سرعت به صورت متوالی ظاهر می شوند. داده‌های سری زمانی معمولاً از این نوع انیمیشن استفاده می‌کنند. Tweening یا انتقال صاف بین دو حالت نقشه، توسط دستورالعمل های برنامه در کد SVG یا جاوا اسکریپت ایجاد می شود و برای نمایش داده های مکانی-زمانی پیوسته مفید است (به زمان نقشه برداری مراجعه کنید ) . 

تعامل مکالمه بین کاربر و نقشه با واسطه مشتری است (راث، 2012). با از بین رفتن برنامه های کاربردی اینترنتی غنی که در بخش 1 به آنها اشاره شد، تقریباً تمام تعاملات نقشه وب با استفاده از جاوا اسکریپت، زبان برنامه نویسی وب اجرا می شوند (پترسون، 2014). ورودی کاربر از طریق رابط کاربری (UI) جمع آوری می شود ، مجموعه ای از عناصر موجود در صفحه که کاربر می تواند ببیند و/یا دستکاری کند، و توسط اسکریپت برای ایجاد تغییر در وضعیت نقشه تفسیر می شود (به رابط کاربری و تجربه کاربری مراجعه کنید. طراحی ).

نقشه‌های وب کاشی‌شده با استفاده از AJAX تعامل نقشه‌ای صاف ایجاد می‌کنند (به بخش 1.2 مراجعه کنید). در حالی که AJAX نحوه برنامه ریزی صفحات وب را متحول کرد، اشکال اصلی آن نیاز به اتصال مداوم به شبکه است، که باعث می شود اکثر نقشه های وب کاشی کاری شده در جایی که سرویس اینترنت لکه دار یا در دسترس نیست غیرقابل استفاده باشد (Tsou، 2011).

3.5 پلتفرم ها و API های نقشه برداری وب

برنامه‌های کاربردی وب مبتنی بر ابر کاربرپسند روزافزون، نقشه‌برداری وب را در دسترس افراد تازه‌کار فنی قرار داده است (Muehlenhaus، 2014). این خدمات به کاربران اجازه می‌دهد تا داده‌ها را به نقشه‌های پایه از قبل موجود اضافه کنند، داده‌ها را سبک‌دهی کنند، اجزای تعاملی را اضافه کنند و محصول نهایی را برای اشتراک‌گذاری مستقیم یا جاسازی در یک صفحه وب میزبانی کنند. چندین سرویس محبوب نقشه برداری وب در جدول 3 فهرست شده است.

نقشه کشان پیشرفته تری که مایلند نمایش و رابط کاربری یک نقشه وب را سفارشی کنند، می توانند این کار را در سمت کلاینت با استفاده از یک API جاوا اسکریپت انجام دهند (رابط برنامه نویسی برنامه؛ به بخش 2 مراجعه کنید) (پترسون، 2014). APIهای تجاری از خدمات نقشه اختصاصی استفاده می کنند، در حالی که APIهای منبع باز هیچ سرویس والدین خاصی ندارند (Roth et al., 2014). هر دو شامل کتابخانه‌های کدی هستند که روش‌هایی را برای ساده‌سازی استفاده از DOM برای ایجاد نقشه‌های وب ارائه می‌کنند. API های محبوب در جدول 4 فهرست شده اند.

4. ملاحظات طراحی

هدف این بخش ترسیم محدودیت‌های طراحی منحصربه‌فرد نقشه‌های وب بدون بازخوانی اصول نقشه‌برداری ارائه‌شده در سایر موضوعات CV است که همچنان به نقشه‌های وب مرتبط هستند.

4.1 هدف نقشه

با پیروی از نمودار Swoopy (DiBiase، 1990؛ به نقشه کشی و فناوری مراجعه کنید )، نقشه های وب را می توان در امتداد یک پیوستار از بسیار اکتشافی تا بسیار موضوعی قرار داد (شکل 5؛ طراحی رابط کاربری و تجربه کاربر (UI/UX) را ببینید).

شکل 5. پیوستار نقشه وب.

سلسله مراتب بصری تسلط بصری نسبی اشیاء بر روی نقشه است، به طوری که اشیاء مهمتر از نظر بصری غالب هستند (دنت، 1990). از آنجایی که آنها ویژگی‌های زیادی را نشان می‌دهند که ممکن است مورد توجه باشند، نقشه‌های وب اکتشافی بیشتر باید سلسله مراتب بصری صاف‌تری داشته باشند تا به کاربران اجازه دهند آزادی بیشتری برای نتیجه‌گیری خود داشته باشند. آنها همچنین باید امکان تعامل بیشتر را فراهم کنند تا کاربر بتواند نماهای نقشه منحصربفردتری ایجاد کند (MacEachren، 1994). در مقابل، نقشه‌های موضوعی باید دارای سلسله مراتب بصری قوی و تعاملات اندکی برای حفظ تمرکز کاربر بر روی اطلاعات کلیدی ارائه‌شده باشند (شکل 6).

شکل 6. ابزار دانلود نقشه ملی (بالا) حجم زیادی از داده ها را برای کاوش فراهم می کند، شامل بسیاری از تعاملات ممکن است، و نماد لایه های نقشه برای ایجاد یک سلسله مراتب بصری مسطح است. در مقابل، نقشه موضوعی نیویورک تایمز نشان داده شده در شکل 1 (پایین) هیچ تعاملی ندارد و اطلاعات مهم را با نمادهای پررنگ، برچسب‌ها و پیام‌ها در بالای یک نقشه پایه شسته شده برجسته می‌کند و یک سلسله مراتب بصری قوی ایجاد می‌کند.

نقشه های وب باید از طراحی بیش از حد اجتناب کنند . برای به حداکثر رساندن وضوح و قابلیت استفاده، یک نقشه وب فقط باید شامل اطلاعات، عناصر نقشه و تعاملات لازم برای دستیابی به هدف نقشه باشد (Tolochko، 2016).

4.2 عناصر نقشه

عناصر نقشه وب باید در سراسر نقشه پایه، داده‌ها و لایه‌های رابط کاربری نقشه ظاهری ثابت داشته باشند و با طراحی کلی صفحه یا برنامه مطابقت داشته باشند (Tolochko، 2016). اندازه‌ها و وضوح صفحه‌نمایش دستگاه‌ها بسیار متفاوت است و بر نحوه نمایش نقشه‌های وب برای کاربر تأثیر می‌گذارد (Muehlenhaus، 2014). یک نقشه وب باید طرح خود را به صورت پویا تنظیم کند تا با فضای نمایش موجود هر دستگاهی که برای استفاده در آن در نظر گرفته شده است، مطابق با استراتژی های طراحی وب پاسخگو باشد (جنی و همکاران، 2008؛ مارکوت، 2011). علاوه بر این، مرورگرها و سیستم عامل های مختلف تفاوت های جزئی در نحوه نمایش صفحات وب دارند، بنابراین نقشه های وب باید قبل از انتشار بر روی چندین پلت فرم مختلف آزمایش شوند. جدول 5 خلاصه ای از عناصر رابط کاربری مبتنی بر نقشه و طرح های رایج پیاده سازی را ارائه می دهد.

4.3 دسترسی

دسترسی برای وب به این معنی است که افرادی که دارای معلولیت هستند، مسن تر هستند یا در مناطق روستایی یا کشورهای در حال توسعه زندگی می کنند می توانند از وب سایت ها و برنامه های کاربردی وب استفاده کنند (W3C، 2016). نقشه های وب باید از دستورالعمل های دسترسی به محتوای وب منتشر شده توسط کنسرسیوم وب جهانی (W3C) تا حد امکان پیروی کنند. برای مثال، نقشه‌های وب می‌توانند تگ‌های جایگزین را برای تصاویری که توسط صفحه‌خوان‌ها خوانده می‌شوند، استفاده کنند، از سطوح عنوان مناسب برای عناوین استفاده کنند، و گزینه‌های ورودی صفحه‌کلید را برای تعاملات اجازه دهند. استایل باید کاربران کوررنگی را در نظر بگیرد. نقشه‌های وب تعاملی که بر فناوری‌های جدیدتر یا آنهایی که مجموعه داده‌های بزرگی دارند متکی هستند، باید نسخه‌های جایگزینی را ارائه دهند که می‌توان با سرعت اتصال پایین‌تر و مرورگرهای قدیمی‌تر و ناسازگار مشاهده کرد (Tolochko، 2016).