نقشه تعاملی چند رسانه ای یک صفحه ای

خلاصه

ارتباط دانش محلی در میراث فرهنگی در حال حاضر تایید شده است. این به تعیین بسیاری از پروژه‌های مبتنی بر جامعه با شناسایی موادی که باید به صورت دیجیتالی در مجموعه‌های چندرسانه‌ای ارائه‌شده توسط جوامع داوطلبانه به جای کسب‌وکارهای انتفاعی یا نهادهای دولتی نگهداری شوند، کمک می‌کند. با توجه به اینکه جستجو و مرور متون، تصاویر، ویدئو و مدل‌های سه‌بعدی مربوط به مکان‌ها ضروری‌تر از استفاده از جستجوی ساده مبتنی بر متن است، در این پژوهش یک نقشه چند رسانه‌ای تعاملی اجرا شد. نقشه، که روی یک صفحه زبان نشانه گذاری HyperText (HTML) با استفاده از AJAX (جاوا اسکریپت ناهمزمان و XML) بارگذاری می شود، با مکانیزم کنترل سمت سرویس گیرنده با استفاده از مؤلفه های jQuery که هم آزادانه در دسترس هستند و هم به صورت ad hoc توسعه یافته اند، مطابق با تعامل کاربر برای ساده‌سازی انتشار اطلاعات ارجاع‌شده جغرافیایی، برنامه همه داده‌ها را در یک فایل نمادگذاری شی جاوا اسکریپ جغرافیایی (GeoJSON) به جای پایگاه داده ذخیره می‌کند. محتویات چندرسانه‌ای – مرتبط با نقاط مورد علاقه (PoIs) انتخاب شده – را می‌توان از طریق جستجوی متن و مرور فهرست و همچنین با مشاهده پیش‌نمایش‌های آن‌ها یک به یک در یک توالی در یک پنجره پیمایشی انتخاب کرد (به ترتیب: «جدول»، توابع “Folder” و “Tile”). PoIها – که روی نقشه با نشانگرهای چند شکلی با استفاده از مجموعه ای از رنگ های بدون ابهام تجسم شده اند – می توانند از طریق دسته ها و انواع آنها، وضعیت دسترسی و جدول زمانی فیلتر شوند، بنابراین قابلیت استفاده سیستم را بهبود می بخشد. توابع نقشه با استفاده از داده های جمع آوری شده در یک پروژه Comenius نشان داده شده اند. نکاتی در مورد نرم افزار کاربردی و معماری نیز در این مقاله ارائه شده است.

کلید واژه ها:

برنامه تک صفحه ای ؛ کنترلر نمای مدل ; چند رسانه ای ؛ نقشه برداری ؛ VGI

چکیده گرافیکی

1. معرفی

ارزش و اهمیت دانش محلی در میراث فرهنگی و اهمیت حفظ آن برای نسل های آینده از قبل شناخته شده است. در نتیجه، روند درگیر کردن جوامع به تدریج در طول زمان بالغ شده است و بر عدم تمایل دارندگان دانش به افشای اطلاعات و داستان ها غلبه کرده است. در این زمینه، نقشه‌ها نقش محوری در جمع‌آوری و به اشتراک‌گذاری دانش دارند، به عنوان مثال، ابتکار اخیر جمع‌سپاری برای ایجاد نقشه میراث فیلیپین، که توسط Arches طراحی شده و توسط سهامداران محلی، واحدهای دولتی، میراث نگهداری می‌شود، نشان داده شده است. پزشکان و داوطلبان [ 1 ]. ابزار انتشار اطلاعات جغرافیایی ممکن است متفاوت باشد. آنها شامل موارد زیر است:

افرادی که از ابزارهای اینترنتی با کاربرد آسان برای ساخت سایت هایی استفاده می کنند که تقریباً به طور کامل توسط محتوای تولید شده توسط کاربر پر شده است، بدون محدودیت در ماهیت محتوا [ 2 ].
استفاده عمومی از خدمات – مانند Wikimapia و Flickr – به شهروندان اجازه می دهد تا توضیحاتی از نقاط مورد علاقه (PoIs) همراه با مختصات جغرافیایی ارائه دهند، فعالیتی که با اصطلاح “اطلاعات جغرافیایی داوطلبانه” (VGI)، در سال 2007 توسط Goodchild ابداع شد [3] . ].

«مکانیسم‌های مورد نیاز برای تضمین کیفیت، شناسایی و حذف خطاها، و ایجاد همان سطح اعتماد و اطمینانی که آژانس‌های ملی نقشه‌برداری به طور سنتی از آن برخوردار بوده‌اند، به‌طور عمده وجود ندارند» [3 ] . علاوه بر این، تخمین زده شده است که بیش از نیمی از جمعیت فرهیخته توانایی اولیه با نقشه ها را ندارند، که نشان می دهد که توسعه نقشه های تعاملی شامل چند رسانه ای [4 ] درک اطلاعات را برآورده می کند. با این حال، تا به امروز، نقشه‌های تعاملی از محتوای چند رسانه‌ای استفاده نمی‌کنند یا تنها از آن به عنوان کمکی برای درک محتوای نقشه استفاده می‌کنند، با توجه ضعیف به استفاده از رنگ‌ها و نمادها در نشانگرها، مانند مثال‌های زیر.

2. مطالعات موردی نقشه تعاملی

رویکردهای مختلف برای نقشه‌برداری از PoIها در زیر از طریق تجزیه و تحلیل رابط‌ها و معماری‌های نقشه‌های تعاملی قبرس، مالت و ژاپن نشان داده شده‌اند. جدول مقایسه ای از ویژگی های آنها – از جمله نقشه ما – نیز ارائه شده است.

2.1. نقشه تعاملی قبرس

رابط. نقشه تعاملی قبرس ( شکل 1) بدون نمایش نشانگر شروع می شود. کاربر دسته‌های PoIs را برای نمایش روی نقشه با کلیک کردن روی نشانگرهایشان از فهرستی در پنجره «دسته‌های PoIs» (واقع در سمت چپ پنجره)، که متعهد به تعاملات رابط کاربری است، انتخاب می‌کند. نشانگرها شکل یکسانی دارند (سپر) با رنگ های پس زمینه متفاوت و تصاویر پیش زمینه متفاوت. رنگ‌ها خیلی مفید نیستند، زیرا دسته‌های مختلف گاهی اوقات رنگ پس‌زمینه یکسانی دارند (به عنوان مثال، بنفش، در انواع «نمایش‌ها»، «موزه‌ها»، «تئاترها» و «اطلاعات»). نشانگرهای همپوشانی با یک نشانگر دایره ای خاص با رنگ و قطر متناسب با عدد PoI همپوشانی شده جایگزین می شوند. با کلیک بر روی یک نشانگر در نقشه، فراخوانی با نام، آدرس و دسته PoI باز می شود. پنج کلید تابع وجود دارد:

“From Here” و “To Here” جایگزین پنجره “PoIs Categories” با پنجره “Navigation” می شوند که امکان دریافت مسیرها به/از PoI و یک PoI دیگر یا یک آدرس را می دهد.
“اشتراک گذاری” یک پنجره بازشو برای ارسال مکان PoI و یک پیام بین دو ایمیل باز می کند.
“گزارش” نظر و آدرس ایمیل کاربر را برای توسعه دهنده ارسال می کند.
“بیشتر” پنجره دیگری را با اطلاعات اضافی (مانند شماره تلفن، در صورت وجود) و یک نقشه کوچک قابل بزرگنمایی با مکان PoI باز می کند.

سایر پنجره‌های تعامل رابط کاربری عبارتند از «جستجو»، برای نشان دادن نقطه انتخاب شده در کادر جستجوی متن (بدون توجه به دسته‌های فعال شده کار می‌کند). “لایه ها”، برای انتخاب نقشه پایه (ژئوماتیک/ماهواره)، زبان (GR/EN) و پوشش ها (مسیرهای دوچرخه نیکوزیا). “چاپ”؛ و “پاک کردن نقشه”.

معماری. نقشه تعاملی یک پلتفرم (gmapi.js) سیستم اطلاعات جغرافیایی (GIS) مبتنی بر وب است. بر اساس رابط برنامه نویسی برنامه OpenLayers (API)، از “iframes” برای بارگیری محتوا از سرورهای مختلف استفاده می کند. امروزه اکثر نقشه های تعاملی از iframes (برای نمایش یک صفحه وب در یک صفحه وب) استفاده می کنند و بیشتر پیاده سازی ها نیاز به استفاده از جاوا اسکریپت، برگه های سبک آبشاری (CSS) و HTML5 برای ساخت یک وب سایت مبتنی بر iframes واکنش گرا دارند. با این حال، استفاده از iframe دارای معایبی است، به عنوان مثال:

iframes می تواند توسعه یک وب سایت را پیچیده کند.
ایجاد وب سایت های بد ساخت با استفاده از iframe آسان است. رایج ترین اشتباه شامل پیوندی است که صفحات وب تکراری نمایش داده شده در iframe ایجاد می کند.
موتورهای جستجو که به یک صفحه وب ارجاع می دهند فقط آدرس آن سند خاص را می دهند. این بدان معنی است که موتورهای جستجو ممکن است مستقیماً به صفحه ای که قرار است در یک مجموعه فریم نمایش داده شود پیوند دهند.
کاربران آنقدر با ناوبری معمولی با استفاده از جداول، دکمه برگشت و غیره آشنا شده اند، که پیمایش در سایتی که از iframe استفاده می کند می تواند مشکل ساز باشد.
استفاده از تعداد زیاد iframe می تواند بار کاری زیادی را روی سرور وارد کند.

مزایای اصلی iframes HTML5 امکان مشاهده چندین سند در یک صفحه وب و توانایی بارگذاری صفحات از سرورهای مختلف در یک مجموعه فریم است. این راه حل، اگرچه با پذیرش ویژگی های جدید و بی اعتبار شدن سایرین در حال تکامل است، ممکن است مانع تکامل و ارتقاء برنامه و پاسخگویی آن شود. به عنوان یک جایگزین، برنامه ما از jQuery با روشن کردن CSS3 برای رابط کاربری (به عنوان مثال، به منظور ساده سازی دستکاری عناصر به عنوان منوی پیمایش؛ به بخش 4.1 مراجعه کنید) و AJAX (جاوا اسکریپت ناهمزمان و XML) برای تسریع در تعامل کاربر استفاده می کند. (به عنوان مثال، به منظور به روز رسانی صفحه وب بدون بارگیری مجدد).

2.2. نقشه تعاملی مالت

رابط. نقشه تعاملی مالت ( شکل 2 ) به دلیل طراحی خوب، قادر به تولید نتایج بهینه است. بدون نشانگر شروع می شود. کاربر انواع PoIs (گروه‌بندی شده بر اساس دسته‌ها) را برای نشان دادن روی نقشه با بررسی موارد از یک لیست، بدون اتصال به نشانگرهای رنگی روی نقشه انتخاب می‌کند/لغو انتخاب می‌کند. نشانگرها همان شکل (یک قطره قرمز رو به بالا و کج شده) با یک هسته رنگی دارند. گاهی اوقات انواع مختلف در یک دسته و در دسته های مختلف دارای رنگ یکسان در هسته هستند (به عنوان مثال، سیاه، در “عامل های مسافرتی” و “استحکامات و برج ها”).

علاوه بر این، فهرست دسته‌ها و انواع فقط بر اساس حروف الفبا ارائه می‌شود، که ارتباط نشانگرها را با انواعی که نشان می‌دهند غیرممکن می‌کند. با کلیک بر روی یک نشانگر در نقشه، فراخوانی با نام، تصویر، و توضیحات کوتاه PoI با پیوند «بیشتر بخوانید» باز می‌شود (همه پیوندها یک صفحه را با یک نقشه ماهواره‌ای بزرگ‌نمایی بدون محتوا بارگذاری می‌کنند). همچنین یک پیوند غیر کاربردی “دریافت مسیرها” وجود دارد. دوازده زبان برای رابط موجود است، اما دسته ها و انواع اغلب به زبان انگلیسی باقی می مانند.

معماری. نقشه تعاملی از سرویس وب «انتقال وضعیت نمایندگی» (REST) و همه ویژگی‌هایی که چارچوب «نت» ارائه می‌کند استفاده می‌کند. REST از پروتکل انتقال HyperText (HTTP) برای هر چهار عملیات CRUD (ایجاد/خواندن/به‌روزرسانی/حذف) استفاده می‌کند. در نتیجه، این برنامه تقریباً بر روی هر دستگاه یا برنامه “آنلاین” اجرا می شود، اما برنامه مالت یک صفحه وب پاسخگو نیست.

به عنوان یک جایگزین، برنامه ما نه تنها با محدودیت های REST (RESTful) مطابقت دارد، بلکه پاسخگو است، زیرا چارچوب پیشرو در این دسته، jQuery را پذیرفته است، که نه تنها یک API Ajax یکنواخت، بلکه تعداد زیادی مرورگر متقابل را نیز ارائه می دهد. توابع کمکی

طراحی وب سایت واکنش گرا یک رویکرد شناخته شده برای طراحی وب سایت است که با خواندن آسان، ناوبری، پیمایش ساده، حداقل تغییر اندازه مرورگر و سازگاری بین دستگاه ها، تجربه مشاهده بهینه را برای کاربران در هنگام مرور ارائه می دهد. پاسخگویی وب سایت به یک عامل برتر رتبه بندی موتورهای جستجو تبدیل شده است و به طور قابل توجهی بر نتایج جستجوی گوگل تأثیر می گذارد. هدف اصلی طراحی وب ریسپانسیو ارائه یک تجربه مرور ثابت برای همه است، صرف نظر از نوع دستگاهی که استفاده می شود. تقریباً با تمام وضوح‌ها و اندازه‌های صفحه نمایش تطبیق می‌یابد و بر روی هر دستگاه به راحتی کار می‌کند. با تجربه یکپارچه، محتوا و رسانه در هنگام مرور در چندین دستگاه از جمله آیفون، تلفن هوشمند، لپ تاپ و دسکتاپ به راحتی قابل هضم هستند.

وب سایت های واکنش گرا در حال تبدیل شدن به آینده طراحی وب سایت هستند، زیرا نیاز به طراحی های متعدد برای دسکتاپ، موبایل و تبلت ها را از بین می برند. علاوه بر این، با توجه به وب‌سایت‌های تلفن همراه، برای استفاده از روش‌شناسی «بهینه‌سازی موتور جستجو» (SEO) مناسب‌تر هستند – استراتژی‌ها، تکنیک‌ها و تاکتیک‌هایی که برای افزایش تعداد بازدیدکنندگان یک وب‌سایت با کسب رتبه‌بندی بالا استفاده می‌شوند. در صفحه نتایج جستجوی یک موتور جستجو – از جمله گوگل، بینگ، یاهو و سایر موتورهای جستجو.

2.3. نقشه تعاملی ژاپن

رابط. نقشه تعاملی ژاپن ( شکل 3 ) پنج دسته را با استفاده از نشانگرهایی با شکل یکسان و رنگ های مختلف ارائه می دهد. نشانگر خوشه‌بندی ارائه نشده است و فراخوان فقط حاوی نام PoI است. نقشه را می توان بر اساس منطقه تجسم کرد.

معماری. نقشه تعاملی از یک سرویس وب برای بازیابی فایل “مقدار جدا شده با کاما” (CSV) موجود در یک مکان یاب منبع یکنواخت (URL) با استفاده از درخواست HTTP GET استفاده می کند. داده ها را در یک فایل تجزیه می کند و سپس داده های ذخیره شده در آن فایل را روی نقشه تجسم می کند. برخی از پارامترهای URL محتوای CSV را که باید برگردانده شود سفارشی و فیلتر می کنند.

با این حال، این راه حل می تواند محدود کننده باشد. هنگامی که با حجم زیادی از داده ها سر و کار دارید یا داده هایی را که حاوی اطلاعات سلسله مراتبی هستند (مثلاً چند رسانه برای یک PoI واحد) استفاده می کنید، به جای CSV از فرمت داده «جاوا اسکریپت شیء نمادگذاری» (JSON) استفاده می شود.

علاوه بر این، بیشتر APIهای مدرن RESTful هستند و بنابراین به صورت بومی از ورودی و خروجی JSON پشتیبانی می کنند. چندین فناوری پایگاه داده از آن پشتیبانی می کنند و استفاده از آن در اکثر زبان های برنامه نویسی نیز به طور قابل توجهی آسان تر است.

2.4. مقایسه ویژگی ها

برنامه های مورد بحث در بالا دارای رابط های مختلف و معماری مشابه هستند (JSON، REST API، AJAX، jQuery، CSS)، اما از نظر عملکردی به اندازه نقشه تعاملی ما ( جدول 1 )، که به طور گسترده در بخش 4 و بخش 5 نشان داده شده است، کامل نیستند .

در یک برنامه وب سنتی، هر بار که برنامه با سرور تماس می‌گیرد، یک صفحه جدید زبان نشانه‌گذاری HyperText (HTML) را ارائه می‌کند و باعث به‌روزرسانی صفحه در مرورگر می‌شود. این در برنامه ما اتفاق نمی افتد، محتوای اصلی را در یک صفحه اولیه نشان می دهد، که به دلایل سئو ثابت است. بعداً، تمام تعاملات UI (رابط کاربری) در سمت کلاینت از طریق jQuery و CSS رخ می دهد و پس از بارگیری صفحه اولیه، سرور صرفاً به عنوان یک لایه سرویس عمل می کند، از طریق AJAX که داده های بازگشتی (نه نشانه گذاری) را در یک مکان خاص فراخوانی می کند. فرمت JSON GeoJSON نامیده می شود که به صورت پویا نقشه را بدون بارگیری مجدد به روز می کند.

ارسال داده‌های برنامه به‌عنوان GeoJSON، جدایی بین ارائه (نشانه‌گذاری HTML5 و CSS3) و منطق برنامه (درخواست‌های AJAX و پاسخ‌های GeoJSON) ایجاد می‌کند و طراحی و تکامل هر لایه را آسان‌تر می‌کند. در یک برنامه کاربردی “Single-Page” (SPA; RESTful) که به خوبی طراحی شده است، می توانیم نشانه گذاری HTML5 و سبک CSS3 را بدون تغییر کدی که منطق برنامه را پیاده سازی می کند تغییر دهیم.

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

مثال‌های بالا که عمدتاً بر روی نقشه‌برداری PoI متمرکز شده‌اند، نیاز به بهبود رابط را نشان می‌دهند تا به کاربران ابزارهای بهتری برای یافتن نتایج مطابق با نیازهایشان بدهند. با این هدف، رویه‌ای برای ساده‌سازی ارائه محتویات میراث فرهنگی (CH) متعلق به PoIهای ارجاع‌شده جغرافیایی از طریق یک نقشه چندرسانه‌ای موجود در وب با قابلیت‌های پیشرفته طراحی شده است. این در چارچوب پروژه Must See Advisor (Mu.SA) توسعه یافته است، که هدف آن ایجاد دید به جوامع با ارزش گذاری دانش از طرف سهامداران منتخب است.

3. جمع آوری دانش

پروژه Mu.SA با هدف نشان دادن مکان های کمتر شناخته شده با ارزش گذاری دانش جوامع منتخب مانند تیم های شهرداری، انجمن های فرهنگی و مدارس متوسطه آغاز شد.

کاربردهایی برای تیرانا در آلبانی [ 8 ] و سیراکوز در ایتالیا [ 9 ] توسعه داده شده است که به تدریج ارتباطات متقابل بین دانش – بیان شده از طریق اشیاء چند رسانه ای – و مکان ها را تقویت می کند.

اخیراً، یک فعالیت آزمایشی برای آزمایش برنامه با همکاری مدرسه متوسطه “Ricciotto Canudo” در شهر Gioia del Colle (شهر کوچکی در پس سرزمین جنوب ایتالیا) انجام شد.

هدف دانش آموزانی که در پروژه Comenius “راهنمای مسافران اروپایی” کار می کنند، در میان چیزهای دیگر، آگاهی از میراث شهرستان را توسعه دهند. مشارکت جوانان برای اطمینان از متعهد شدن این ساکنان به شهرک در آینده ضروری است. از آنجایی که کودکان بیشتر در جامعه خود درگیر می شوند، والدین را نیز ترغیب می کند که درگیر شوند [ 10 ].

فعالیت دانش‌آموزان شامل جمع‌آوری برای هر نقطه انتخاب‌شده در پروژه Comenius، تعدادی ویژگی بود: نام، مکان (طول و عرض جغرافیایی، آدرس)، و دسته، با تصویر کوچکی از یک عکس نماینده، وضعیت دسترسی فیزیکی، قرن، سن. ، و توضیحات کوتاه و مبسوط.

در مرحله دوم، اسناد چندرسانه‌ای مربوط به هر نقطه جمع‌آوری می‌شود و داده‌های زیر در یک فایل اکسل دیگر ذخیره می‌شوند: نقطه مرجع، نام سند، توضیحات، دسته‌بندی (برگ، تصویر، ویدئو و شیء چندرسانه‌ای سه بعدی)، منبع و آن URL، با یک تصویر پیش نمایش. این داده ها در یک فایل اکسل ذخیره می شوند و برای تولید نقشه تعاملی چند رسانه ای یک صفحه ای ( شکل 4 ) از طریق یک محیط نویسنده استفاده می شوند.

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

نمونه‌های گزارش‌شده در شکل‌ها به «Distilleria Cassano»، یکی از مهم‌ترین بناهای باستان‌شناسی صنعتی در آپولیا، و در فهرست میراث تاریخی و زیست‌محیطی اشاره دارد.

پس از بازسازی، میزبان رویدادهایی است. برای آن PoI، نقشه تعاملی پیوندی به یک شی چندرسانه ای سه بعدی دارد: یک تور مجازی از ساختمان ( شکل 5 ).

4. رابط

رابط نقشه دسکتاپ به سه جزء اصلی بیان شده است: “منو” ( شکل 4 ، سمت چپ)، “Callout” ( شکل 4 ، مرکز)، و “نوار کناری” ( شکل 4 ، سمت راست).

محتویات چندرسانه ای (قابل فیلتر بر اساس دسته بندی: گالری، برگه، ویدئو و شیء چندرسانه ای سه بعدی) از طریق پیش نمایش آنها قابل دسترسی هستند که توسط عملکردهای “Folder”، “Tile” و “Table” ارائه شده در “Menu” (برای همه PoIها) مدیریت می شوند. ) و در “Callout” PoI ( شکل 6 ).

4.1. منو”

مولفه “منو” دارای عملکردهای زیر است:

“بهترین سایت”، برای پیدا کردن جالب ترین سایت با توجه به رتبه بندی آن (در حال توسعه).
“ماهواره”، برای تغییر نقشه به/از نمای زمین.
“نمایش اسلاید”، برای روشن/خاموش کردن مجموعه متحرک یک تصویر/PoI. این تابع را می توان با استفاده از دستور “?photo” در URL فعال کرد. برای نصب های عمومی (مثلاً نصب در سیراکوز [ 9 ]، جایی که توتم صفحه لمسی استفاده می شود) برای جلب توجه کاربر مفید است.
“لغزنده زمان”، برای فیلتر کردن نشانگرها با توجه به قرن انتخاب شده.
“Folder”، برای نمایش تمام پیش نمایش ها در یک پنجره به ترتیب (به صورت دستی/خودکار)—یک نوار ابزار به آنها اجازه می دهد تا بر اساس دسته فیلتر شوند ( شکل 7 ، در سمت چپ). همه پیش‌نمایش‌های تصاویر را می‌توان در یک «نمایشگر تصویر» تجسم کرد که به کاربر اجازه می‌دهد تصویر را حرکت داده و بزرگ‌نمایی کند – مانند استفاده از ذره‌بین – و در نتیجه حس غوطه‌وری و تحریک کنجکاوی ایجاد می‌کند. یک پانل نمای کلی به کاربر کنترل کامل بر جزئیات را می دهد ( شکل 7 ، در سمت راست).
“جدول”، برای فهرست کردن در یک پنجره همه موارد به ترتیب حروف الفبا بر اساس فیلد انتخاب شده توسط کاربر. یک لیست آبشاری به آنها اجازه می دهد تا بر اساس دسته بندی فیلتر شوند. یک تابع جستجو نیز ارائه شده است ( شکل 8 ، در سمت چپ).
“کاشی”، برای نمایش همه موارد در یک پنجره پیمایش – یک نوار ابزار به آنها اجازه می دهد تا بر اساس دسته فیلتر شوند ( شکل 8 ، در سمت راست).

دو نماد عملکرد در هر پیش‌نمایش ارائه شده است که به کاربران این امکان را می‌دهد تا PoI مرجع را پیدا کنند (فقط در پنجره‌های «Folder» و «Tile» که توسط «منو» نامیده می‌شوند موجود است) یا در پنجره‌ای جدید چندرسانه‌ای متصل به پیش نمایش انتخاب شده (به عنوان مثال: “نمایشگر تصویر” برای تصاویر – شکل 7 ، در سمت راست).

4.2. “Callout”

مؤلفه فراخوانی که می‌تواند با کلیک کردن بر روی یک کادر PoI در نوار کناری یا روی یک نشانگر روی نقشه باز شود، نام، آدرس و تصویر کوچک PoI را نشان می‌دهد. همچنین نمادهای عملکرد، توضیحات کوتاه، دوره ساخت و نمادهای وضعیت را نشان می دهد. پیوند “بیشتر” به کاربران امکان می دهد توضیحات گسترده را ببینند ( شکل 9 ). نمادهای تابع “Folder”، “Tile” و “Table” (مانند مولفه “Menu”) فقط برای محتوای چندرسانه ای متعلق به PoI مورد بررسی اعمال می شود (نماد عملکرد مکان یابی در دسترس نیست).

برای اجازه دادن به جاسازی نقشه در صفحه مربوط به یک PoI خاص، این تابع را می توان با استفاده از دستور “?n=#&callout=on” در URL فعال کرد، جایی که # کد PoI است. همچنین می‌توان نقشه‌ای را که ضریب بزرگ‌نمایی را با استفاده از دستور «?zoom=#»، متمرکز بر نقطه‌ای با مختصات داده شده («lat=#&lon=#»)، یا کد داده‌شده، همانطور که قبلاً مشاهده کردید، نشان داد («? n=#”). در پایین، دو نماد وضعیت گزارش شده است. آنها وضعیت دسترسی فیزیکی آن PoI را نشان می دهند (از طریق سه شکلک: آسان، ناآرام و محدود).

4.3. “نوار کناری”

نوار کناری دارای دو بخش است: یک کادر جستجو با یک افسانه پویا ( شکل 10 ، در سمت چپ و مرکز) و یک پانل فیلتر ( شکل 10 ، در سمت راست).

4.3.1. جعبه جستجو با افسانه پویا

کادر جستجو به کاربر امکان می دهد PoI ها را با توجه به حروف تایپ شده پیدا کند، در حالی که محتویات افسانه پویا را بر این اساس به روز می کند ( شکل 10 ، در سمت چپ). افسانه پویا جعبه اطلاعاتی از PoIها را نشان می دهد که در صورت موجود بودن بر اساس دسته بندی و نوع فهرست شده اند (مانند انواع «بازیلیکا» و «کلیسا» در دسته «آثار معماری» – شکل 10، در مرکز) با استفاده از رنگ‌های بدون ابهام برای هر دو کوررنگ. و افراد غیر کوررنگ [ 11 ].

این محدودیت ها تعداد کل دسته های مختلف را به پنج محدود می کند. با این حال، این مشکلی نیست زیرا داشتن بیش از پنج رنگ در یک زمان، به جای کاهش ابهام، باعث ایجاد مشکل رنگ می شود [ 12 ].

هر جعبه دسته/نوع حاوی داده هایی بر اساس وضعیت نقشه است (به عنوان مثال، هر محتوا می تواند هر از گاهی با توجه به نتایج جستجو/فیلتر تغییر کند):

در سمت چپ، یک «دکمه نشانگر» تمام نشانگرهای آن دسته را روی نقشه فیلتر می‌کند – پس از آن، رنگ کادر به رنگ خاکستری/پیش‌فرض تغییر می‌کند.
در مرکز، «دکمه نام دسته/نوع» گروهی از جعبه‌های اطلاعات PoI (شامل یک تصویر کوچک و نام و آدرس هر PoI) را نشان می‌دهد/پنهان می‌کند.
یک متر در سمت راست تعداد PoI های موجود در آن لحظه را نشان می دهد. جستجوی ” nic ” یک ” گروه معماری ” و دو ” بنای تاریخی معماری ” را ایجاد کرد – که از جمله آنها PoI با نام “کلیسای سنت نیک اولاس” نامگذاری شد.

4.3.2. پنل فیلتر

پنل فیلتر به کاربر اجازه می دهد تا پارامترهای زیر را انتخاب کند:

“داده” (فیلد پیش فرض برای جستجوی متن: عنوان؛ فیلد اضافی: آدرس و توضیحات).
«دسترس‌پذیری» (پیش‌فرض: بدون فیلتر؛ هر ترکیبی از آسان/غیرآسان/محدود در دسترس).
“چند رسانه ای” (پیش فرض: بدون فیلتر؛ هر ترکیبی از گالری/برگ/ویدئو/شیء چندرسانه ای سه بعدی در صورت موجود بودن).
“دوره” (پیش فرض: بدون فیلتر، هر دوره ثبت شده در پایگاه داده موجود است).

دسته چند رسانه ای را می توان مستقیماً از طریق یک نوار ابزار (در پنجره های “Folder” و “Tile”) یا از طریق یک منو (در پنجره “Table”) انتخاب کرد.

5. معماری

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

در سطح بالاتر (انتزاعی)، الگوی معماری استفاده شده با موفقیت “کنترل کننده نمای مدل” (MVC) [ 13 ] است که به زیرسیستم های روابط و همکاری های یک برنامه کاربردی با یکدیگر مربوط می شود. این یک استراتژی برای اجزای مقیاس بزرگ، ویژگی های جهانی و مکانیسم های یک سیستم ارائه می دهد. به طور خاص، برنامه ما نمونه‌ای از «برنامه تک صفحه‌ای» (SPA) است که روشی متفاوت برای ساخت برنامه‌های HTML5 از توسعه صفحات وب سنتی است.

در برنامه های کاربردی وب سنتی، مشتری با درخواست یک صفحه ارتباط با سرور را آغاز می کند. سپس سرور درخواست را پردازش کرده و HTML صفحه را برای مشتری ارسال می کند. به عنوان مثال، در تعاملات قبلی با صفحه، کاربر به یک پیوند پیمایش می کند یا فرمی را با داده ارسال می کند، یک درخواست جدید به سرور ارسال می شود و جریان دوباره شروع می شود: سرور درخواست را پردازش می کند و صفحه جدیدی را به سرور ارسال می کند. مرورگر در پاسخ به اقدام جدید درخواست شده توسط مشتری. در برنامه های تک صفحه ای (SPA) معمولاً کل صفحه پس از درخواست اولیه در مرورگر بارگذاری می شود، اما تعاملات بعدی از طریق درخواست های AJAX (جاوا اسکریپت ناهمزمان و XML یا JSON که اغلب در نوع AJAJ استفاده می شود) انجام می شود. این بدان معناست که مرورگر باید تنها بخشی از صفحه را که تغییر کرده است به روز کند.

در سطح پایین تر، طرح های مختلفی برای پالایش و ساخت زیرسیستم های کوچکتر ارائه شده است. الگوی MVC نه تنها نقش‌هایی را که اشیاء در برنامه بازی می‌کنند (Model، View یا Controller) تعریف می‌کند، بلکه نحوه ارتباط اشیاء با یکدیگر را نیز مشخص می‌کند. مزایای اتخاذ این الگو بسیار زیاد است. برنامه ای که با استفاده از MVC پیاده سازی می شود می تواند RESTful باشد یا نه. برنامه به گونه ای طراحی شده است که راحت باشد. بسیاری از اشیاء در این برنامه بیشتر قابل استفاده مجدد هستند و رابط های آنها بهتر تعریف می شوند. علاوه بر این، برنامه به راحتی نسبت به سایر برنامه ها قابل توسعه است. نقشه تعاملی چند رسانه ای دارای معماری لایه ای (سه لایه) است و از انواع مختلفی از اجزا تشکیل شده است ( شکل 11 ، از پایین به بالا):

منبع داده (سرویس‌های داده، دسترسی به داده، ذخیره‌سازی آفلاین): مدل‌ها/مجموعه‌های مدل‌ها.
تعامل با برنامه (منطق سرور – PHP: پیش پردازشگر Hypertext، منطق کلاینت-JQUERY)، ثبت وضعیت و ناوبری (Navigation): رویدادها، مسیریابی.
نشانه گذاری برای ارائه داده ها (صفحه اولیه، رابط کاربری): الگوها.

از نظر فنی، طراحی SPA و توسعه اولیه SPA پیچیده بود. لازم بود راه‌حل‌هایی برای غلبه بر زمان انتظار طولانی پیدا شود که به SPA اجازه می‌داد تا به اندازه بهینه رشد کنند. در این رویکرد، کلاینت سیستم شامل فایل های HTML، jQuery و CSS است که به طور جزئی یا کامل توسط سرور رندر شده و در زمان واقعی به مرورگر وب ارسال می شود. در این SPA، پس از بارگذاری صفحه اول، تمام تعاملات با سرور از طریق تماس های AJAX انجام می شود. این فراخوانی های AJAX داده ها را در قالب JSON، به ویژه ساختار داده GeoJSON برمی گرداند.

این برنامه از داده های JSON برای به روز رسانی پویا صفحه بدون بارگیری مجدد صفحه استفاده می کند و کتابخانه رابط کاربری (UI) و داده ها (GeoJSON) را جدا می کند. فقط از طریق JSON REST API (ارسال/دریافت JSON با استفاده از AJAX) با سرور ارتباط برقرار می‌کند و به هر دو بخش اجازه می‌دهد به طور مستقل توسعه و آزمایش شوند. این جداسازی طراحی و تکامل هر لایه را آسان تر می کند.

علاوه بر این، برنامه به گونه‌ای طراحی شده است که در یک محیط پردازش معمولی که شامل برنامه‌ها و کتابخانه‌های ساختاریافته (ابزارها، ابزارک‌ها و افزونه‌ها) می‌شود، که مهم‌ترین آنها Google Maps API [14] است، طراحی شده است .

5.1. رویکرد SPA (در سطح بالاتر)

SPAها برنامه‌های وب هستند که یک صفحه HTML را بارگیری می‌کنند و به صورت پویا آن صفحه را با تعامل کاربر با برنامه به‌روزرسانی می‌کنند. به جای گسترش عملکرد نقشه تعاملی چندرسانه ای در مجموعه ای از صفحات وب جداگانه با لینک های بین آنها، می توان یک صفحه ریشه واحد تعریف کرد که کاربران تا زمانی که از برنامه استفاده می کنند روی آن فرود بیایند و هرگز آن را ترک نکنند.

این یک نوع منطق سمت مشتری است که داده‌ها و تکه‌های محتوای آن صفحه را تغییر می‌دهد و به کاربران اجازه می‌دهد بدون خروج از صفحه در صفحه‌های منطقی حرکت کنند. این بدان معناست که کاربران هرگز در حین استفاده از برنامه، به‌روزرسانی کامل صفحه را مشاهده نمی‌کنند. در عوض، آنها بر اساس تعاملشان، تغییری را در بخشی از صفحه نمایش می بینند، و این تغییرات را می توان به روشی روانتر با انتقال برای بهبود تجربه کاربر انجام داد. SPAها سریع هستند، زیرا اکثر منابع مانند صفحات HTML، فایل‌های CSS و اسکریپت‌ها فقط یک بار در طول عمر برنامه بارگذاری می‌شوند و فقط داده‌ها به عقب و جلو منتقل می‌شوند، که باعث کاهش استفاده از پهنای باند می‌شود که این نیز یک امتیاز مثبت است. SPA ها می توانند به طور موثر از حافظه پنهان و ذخیره سازی محلی استفاده کنند. مقیاس بندی و ذخیره سازی منابع آسان است. SPA ها عمل می کنند و بیشتر شبیه یک برنامه کاربردی هستند تا یک صفحه وب. یکی از مزیت‌های معماری SPA کاهش بسیار زیاد در “چت” بودن برنامه است. این به درستی طراحی شده است تا اکثر پردازش های مشتری را انجام دهد و تعداد درخواست ها به سرور را کاهش دهد. در واقع یک SPA امکان انجام پردازش کاملا آفلاین را فراهم می کند که در این زمینه بسیار بزرگ است. یک برنامه کاربردی “چت”، به عنوان یک ویژگی عملکرد مهم، تعداد زیادی درخواست از راه دور و پاسخ های مربوطه دارد (“نوبت برنامه” یا “نوبت برنامه” در اصطلاحات Trace Trace). اینها همچنین اغلب به عنوان سفرهای رفت و برگشت شبکه شناخته می شوند، به ویژه در اسناد توسعه دهنده. در واقع یک SPA امکان انجام پردازش کاملا آفلاین را فراهم می کند که در این زمینه بسیار بزرگ است. یک برنامه کاربردی “چت”، به عنوان یک ویژگی عملکرد مهم، تعداد زیادی درخواست از راه دور و پاسخ های مربوطه دارد (“نوبت برنامه” یا “نوبت برنامه” در اصطلاحات Trace Trace). اینها همچنین اغلب به عنوان سفرهای رفت و برگشت شبکه شناخته می شوند، به ویژه در اسناد توسعه دهنده. در واقع یک SPA امکان انجام پردازش کاملا آفلاین را فراهم می کند که در این زمینه بسیار بزرگ است. یک برنامه کاربردی “چت”، به عنوان یک ویژگی عملکرد مهم، تعداد زیادی درخواست از راه دور و پاسخ های مربوطه دارد (“نوبت برنامه” یا “نوبت برنامه” در اصطلاحات Trace Trace). اینها همچنین اغلب به عنوان سفرهای رفت و برگشت شبکه شناخته می شوند، به ویژه در اسناد توسعه دهنده.

تأثیر منفی عملکرد این برنامه ها با تأخیر مسیر افزایش می یابد و دسترسی از راه دور را به چالشی برای برنامه های چت تبدیل می کند. توجه داشته باشید که چت بودن ذاتاً بد نیست، تنها زمانی که با تأخیر شبکه همراه باشد به یک مشکل عملکرد تبدیل می‌شود. از دیگر مزایای آن می توان به موارد زیر اشاره کرد:

«ردیابی وضعیت آسان‌تر»—یک SPA نیازی به استفاده از کوکی‌ها، ارسال فرم، ذخیره‌سازی محلی، ذخیره‌سازی جلسه و غیره برای به خاطر سپردن وضعیت بین دو بارگذاری صفحه ندارد.
محتوای دیگ بخار SPA، که در هر صفحه (سرصفحه، پاورقی، لوگو، بنر حق چاپ و غیره) وجود دارد، فقط یک بار در هر جلسه معمولی مرورگر بارگیری می شود. این برنامه بدون تاخیر سربار اضافی ناشی از تغییر “صفحات” انجام می شود.

SPAها با توانایی آنها در ترسیم مجدد هر بخشی از UI بدون نیاز به درخواست رفت و برگشت سرور برای بازیابی HTML متمایز می شوند. این با جدا کردن داده ها از ارائه داده ها از طریق یک لایه مدل که داده ها را مدیریت می کند و یک لایه دید که از مدل ها می خواند به دست می آید.

اگر یک SPA به اندازه قابل توجهی رشد کند، بارگیری کل برنامه در بارگذاری صفحه ممکن است برای تجربه مضر باشد زیرا این کار شبیه بارگیری تمام صفحات یک وب سایت زمانی است که فقط صفحه اصلی درخواست شده است. مزیت اصلی این راه حل این است که هر جزء از الگو ممکن است به صورت پویا بر اساس گنجاندن و جایگزینی قطعات قالب گنجانده شود. محتوای صفحه ابتدا همراه با هر CSS و JQuery که ممکن است برای نمایش اولیه آن مورد نیاز باشد دانلود می‌شود تا اطمینان حاصل شود که کاربر سریع‌ترین پاسخ ظاهری را در طول بارگذاری صفحه دریافت می‌کند. هر ویژگی پویا که نیاز به بارگیری صفحه قبل از استفاده دارد، ابتدا غیرفعال می شود و تنها پس از بارگیری صفحه فعال می شود. این باعث می شود jQuery بعد از محتویات صفحه بارگذاری شود.

لایه دید پیچیده ترین بخش SPAهای مدرن است. به هر حال، این تمام هدف یک SPA است – برای سهولت داشتن نماهای فوق العاده غنی و تعاملی. نماها چندین کار برای انجام دارند:

ارائه یک الگو روشی که داده‌ها را می‌گیرد و نقشه‌برداری می‌کند/به‌عنوان HTML5 خروجی می‌گیرد، مورد نیاز است.
به روز رسانی نماها در پاسخ به رویدادهای تغییر. وقتی داده‌های مدل تغییر می‌کند، باید نمای(های) مرتبط را به‌روزرسانی کنیم تا داده‌های جدید را منعکس کنیم.
رفتار اتصال به HTML5 از طریق کنترل کننده رویداد. هنگامی که کاربر با نمای HTML5 تعامل می کند، به روشی نیاز است که رفتار (کد) را تحریک کند.

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

وظیفه لایه Model نمایش دامنه مشکل، حفظ وضعیت و ارائه روش هایی برای دسترسی و تغییر وضعیت برنامه است. این لایه (به ویژه مولفه های RESTful API سرویس های داده) مسئول خواندن از پشتیبان با استفاده از یک API ساده و قدرتمندتر است. داده‌های JSON را می‌پذیرد، و اشیاء JSON را که به مدل‌ها تبدیل می‌شوند، از ذخیره‌سازی/کش داده‌ها برمی‌گرداند و همچنین از backend نیز درخواست می‌کند. جستجوها با شناسه را می‌توان مستقیماً از حافظه پنهان دریافت کرد، اما پرس‌وجوهایی که پیچیده‌تر هستند باید به پشتیبان ارسال شوند تا مجموعه کامل داده‌ها را جستجو کنند.

سرویس‌های داده با استفاده از معماری سبک‌تر RESTful ساخته شده‌اند و JSON تبدیل به یک فرمت استاندارد تبادل داده برای سرویس‌های وب REST شده است.

5.2. رویکرد استراحت (در سطح پایین)

در این SPA معماری شده، می‌توانیم نشانه‌گذاری HTML را بدون لمس کدی که منطق برنامه را پیاده‌سازی می‌کند، تغییر دهیم و تمام تعاملات رابط کاربری در سمت مشتری، از طریق jQuery و CSS انجام می‌شود. در محاسبات، REST یک سبک معماری است که توسط مجموعه‌ای از شش محدودیت تعریف می‌شود، که هدف آن ارتقای عملکرد، مقیاس‌پذیری، سادگی، اصلاح‌پذیری، دید، قابل حمل بودن و قابلیت اطمینان است [15 ] . REST شامل مجموعه ای هماهنگ از اجزا، اتصال دهنده ها و عناصر داده در یک سیستم ابررسانه ای توزیع شده است، که در آن تمرکز بر نقش های مؤلفه و مجموعه خاصی از تعاملات بین عناصر داده به جای جزئیات پیاده سازی است.

اتخاذ سبک معماری REST با هدف به دست آوردن یک نرم افزار راه حل “بی حالت” است که در آن هر درخواست از مشتری به سرور شامل تمام اطلاعات لازم برای پردازش درخواست است و سرور هیچ داده جلسه ای را از طرف خود ذخیره نمی کند. مشتری؛ در عوض، مشتری باید تمام داده های جلسه را ذخیره کند. در واقع، اتکای SPA به REST احتمالاً آشکارترین ویژگی SPA است. علاوه بر این، SPA به راحتی با “Google Chrome” اشکال زدایی می شود، که امکان نظارت بر عملیات شبکه و بررسی عناصر صفحه و داده های مرتبط با آنها را فراهم می کند. همه پلتفرم‌های اصلی موبایل، از جمله iOS اپل، اندروید گوگل و WebOS پالم، از مرورگرهای مشابه مبتنی بر وب کیت استفاده می‌کنند. از این رو، فناوری هایی مانند HTML5 و CSS3 به بهبود و پشتیبانی ادامه خواهند داد. این برنامه برای اکثر سیستم عامل های تلفن همراه کار می کند و همچنین روی هر مرورگر وب سازگار با HTML5 کار می کند. آزمایش سازگاری مرورگر انجام شده، نشان داد که برنامه بدون هیچ خطایی در «Google Chrome»، تنها مرورگر وب که ما برنامه را به دلیل استفاده گسترده از آن آزمایش کردیم، ارائه شد.

HTML5 به توسعه دهندگان این امکان را می دهد تا برنامه های واقعاً “پاسخگو” را بنویسند که به طور خودکار با توجه به مرورگر و اندازه صفحه نمایش اندازه را تغییر می دهند و به طور خودکار UI را مطابق با پلت فرم در حال اجرا و جهت گیری دستگاه تشخیص داده و تغییر می دهند. ترکیبی از الگوی SPA و “طراحی وب پاسخگو” [ 16 ] به نظر می رسد که خود را به عنوان یک روند مهم برای توسعه کارآمد برنامه های کاربردی وب تثبیت کرده است. جداسازی ذاتی SPA از UI و منطق برنامه فرصتی برای به اشتراک گذاشتن منطق برنامه مشترک و دارایی های آزمایشی از طریق یک RESTful API مشترک ایجاد می کند. این به برنامه‌های کاربردی وب مبتنی بر مرورگر و برنامه‌های کاربردی تلفن همراه بومی اجازه می‌دهد تا کد برنامه یکسانی را در «بک‌اند» به اشتراک بگذارند.

5.3. نوع داده “GeoJSON”.

برای ساده‌سازی انتشار اطلاعات ارجاع‌شده جغرافیایی، برنامه همه داده‌ها را در یک فایل GeoJSON (Geographic JavaScript Object Notation) ذخیره می‌کند تا در پایگاه داده، که اگر قبلاً در میزبان سرور وجود نداشته باشد، نیاز به نصب DBMS دارد. سیستم. GeoJSON تخصصی در قالب تبادل داده JSON است که می‌تواند داده‌های ارجاع‌شده جغرافیایی را با استفاده از زیرمجموعه‌ای از دستورالعمل‌های ارائه‌شده توسط زبان جاوا اسکریپت مدیریت کند.

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

چندین پلتفرم توسعه با هدف نمایش مجموعه داده های پیچیده وجود دارد. بهترین احتمالاً GitHub است، یک سرویس میزبانی مخزن مبتنی بر وب Git که توسط بیش از 12 میلیون نفر استفاده می شود و هر فایلی را با پسوند «geojson.» به عنوان نقشه ارائه می کند.

GeoJSON به کاربران تعدادی مزیت می دهد. آنها به شرح زیر است:

روش مورد استفاده برای انتقال اطلاعات را استاندارد می کند. متعاقباً چندین فروشنده این روش را اتخاذ کردند، که ما را قادر می‌سازد APIهایی داشته باشیم که همه به یک روش عمل می‌کنند. این می‌تواند به ما کمک کند APIهای Google Maps را کنار بگذاریم و به لایه‌های باز یا پلتفرم‌های GIS آینده برویم. عملیات یکسان خواهد بود و در نتیجه یکپارچگی داده ها حفظ می شود.
نسبت به مدل محاسباتی کلاینت-سرور، بک‌اند می‌تواند به چندین کلاینت به طور یکسان سرویس دهد یا برعکس، مشتری می‌تواند نقشه‌ها را بدون توجه به نحوه پیاده‌سازی پشتیبان ارائه دهد – البته تا زمانی که از GeoJSON استفاده می‌کند. این به مشتری امکان می دهد مستقل از سرور نقشه باشد و صرف نظر از نحوه تولید GeoJSON به مصرف کننده تبدیل شود.
می توان آن را با زبان های برنامه نویسی مدرن استفاده کرد و به راحتی برای اجرا با جاوا اسکریپت بدون تجزیه بیشتر در دسترس است. داده های جغرافیایی به راحتی قابل مرور هستند زیرا یک شی جاوا اسکریپت معمولی هستند. این به راحتی پردازش بیشتر را تسهیل می کند.

خواندن و نوشتن آن آسان است. یک ساختار داده کامل GeoJSON همیشه یک شی (در اصطلاح JSON) است. در GeoJSON، یک شی از مجموعه‌ای از جفت‌های نام/مقدار تشکیل شده است که اعضا نیز نامیده می‌شوند.

5.4. منطق مشتری برنامه ما

نقشه تعاملی چند رسانه ای از AJAX با مکانیزم کنترل سمت مشتری استفاده می کند که از jQuery برای تعامل با کاربران و کنترل ها استفاده می کند. مزیت این مکانیسم کنترلی این است که یک بخش خاص یا یک شی ساده را می توان بدون بارگیری مجدد کل صفحه به روز کرد تا از فراخوانی رویدادهای چرخه عمر صفحه غیرضروری با اثرات زیر جلوگیری شود:

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

اکثر SPA های فعلی هنوز از اصطلاح “لایه کنترل” استفاده می کنند. با این حال، ما بر این باوریم که SPAها به اصطلاح بهتری نیاز دارند، زیرا انتقال‌های حالت پیچیده‌تری نسبت به برنامه‌های سمت سرور دارند. ما به وضوح به مدلی برای نگهداری داده ها و دیدگاهی برای مقابله با تغییرات رابط کاربری نیاز داریم، اما لایه چسب شامل چندین مشکل مستقل است: تغییرات حالت جهانی، مانند آفلاین شدن در یک برنامه بلادرنگ یا نتایج تاخیری از AJAX که در مقطعی برگردانده می شوند. از عملیات باطن و موارد دیگر.

راه حل های مورد استفاده هر کدام اصطلاحات خاص خود را دارند، مانند اتصال رویداد، رویدادهای تغییر، و مقداردهی اولیه. Google Maps API در برنامه کاربردی برای ارائه داده های مکانی در یک مرورگر وب و برای دسترسی به ویژگی های نقشه برداری غنی یکپارچه شده است. برای گوشی‌های هوشمند «بهینه‌سازی شده» است، با مجموعه‌ای از API‌های توسعه‌یافته توسط Google، که امکان ارتباط با سرویس‌های Google و ادغام آن‌ها با سرویس‌های متعدد دیگر را فراهم می‌کند. مزیت دیگر این است که همه داده ها نباید منتقل شوند.

فقط داده هایی که فرد مایل به انتقال است منتقل می شود. هرچه داده کمتری منتقل شود، انتقال سریعتر و احتمال خرابی کمتر است. مؤلفه منطق کلاینت به طور خودکار داده ها را از UI (نما) با اشیاء JSON (مدل) از طریق اتصال دو طرفه داده همگام می کند: از سرور (ذخیره سازی سرور) یا از مشتری (ذخیره سازی HTML-ذخیره سازی سمت مشتری). jQuery به خوبی در این مدل قرار می گیرد زیرا کل تجربه تعامل کاربر نهایی با منطق روی مشتری و همچنین سرور در درصدهای مختلف در هر صفحه انجام می شود.

دلایل مختلفی برای استفاده از فضای ذخیره سازی سمت مشتری وجود دارد:

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

6. نتیجه گیری و کار آینده

این مقاله یک گزارش پروژه در مورد طراحی و اجرای یک نقشه تعاملی چندرسانه‌ای بارگذاری شده در یک صفحه HTML ارائه می‌کند که با همکاری مدرسه راهنمایی “Ricciotto Canudo” در شهر Gioia del Colle آزمایش شده است.

در حال حاضر، این ابزار قابلیت های پیشرفته ای را ارائه می دهد تا به راحتی با دستکاری اشیاء چند رسانه ای از طریق یک رابط کاربری گرافیکی مقابله کند، اما لازم است که برنامه را از چند طریق بهبود بخشید.

رابط. رابط کاربری بهبود می‌یابد تا به کاربران اجازه دهد تا محبوبیت هر PoI را با استفاده از یک رویکرد ساده «yay/nay» به اشتراک بگذارند، زیرا بدون ابهام است (همه عموماً چیزی را دوست دارند یا دوست ندارند). فرمول رتبه بندی رتبه = (دوست داشتن + 1)/(نپسندیدن + 1) × LOG10 (پسندیدن + 1) خواهد بود تا از تقسیم بر صفر جلوگیری شود و امتیازهای با لایک بیشتر نسبت به PoIهایی با لایک کمتر رتبه بندی شوند [17 ] .

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

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

مکانیسم های مناسب مورد نیاز برای اطمینان از کیفیت [ 18 ]، و شناسایی و حذف خطاها توسعه و ارزیابی شده است. با این حال، ایجاد نوعی اعتماد در مجموعه داده VGI جمع آوری شده یک عامل مهم برای جلوگیری از حاشیه نویسی های جغرافیایی نادرست یا مخرب است.

تا به حال، ما دقت موقعیت را با مقایسه بررسی می‌کردیم (رویکرد دستی بر رویکرد خودکار ترجیح داده می‌شود تا از هرگونه خطای پردازش جلوگیری شود [ 19 ]). علاوه بر این، “Keep Right”، “Osmose” یا “OSM Inspector” را می توان برای تجسم خطاهای شناسایی شده در نقشه استفاده کرد.

برای اطمینان از قابلیت استفاده برنامه وب تحت شرایط مختلف، موارد آزمایشی نوشته می‌شود که سناریوهای مختلف را پوشش می‌دهد، نه تنها استفاده کاربردی، بلکه ملاحظات فنی مانند سرعت شبکه و وضوح صفحه نمایش را نیز در بر می‌گیرد. ما از پرسشنامه ای استفاده خواهیم کرد که پنج مؤلفه را اندازه گیری می کند: محتوا، دقت، قالب، سهولت استفاده و به موقع بودن [ 20 ].

منابع

نقشه میراث فیلیپین. در دسترس آنلاین: http://www.philippineheritagemap.org/map (در 16 ژانویه 2017 قابل دسترسی است).
بلات، ای جی مزایا و خطرات اطلاعات جغرافیایی داوطلبانه. J. Map Geogr. Libr 2015 ، 11 ، 99-104. [ Google Scholar ] [ CrossRef ]
Goodchild، MF Citizens به عنوان حسگرهای داوطلبانه: زیرساخت داده های مکانی در دنیای وب 2.0. بین المللی جی. اسپات. زیرساخت داده Res. 2007 ، 2 ، 24-32. [ Google Scholar ]
پترسون، نماینده عناصر نقشه برداری چند رسانه ای. در دسترس آنلاین: http://link.springer.com/chapter/10.1007%2F978-3-540-36651-5_7 (در تاریخ 16 ژانویه 2017 قابل دسترسی است).
نقشه تعاملی قبرس. در دسترس آنلاین: http://geomatic.com.cy/visitcyprus (در 16 ژانویه 2017 قابل دسترسی است).
نقشه تعاملی مالت. در دسترس آنلاین: http://www.visitmalta.com (در 16 ژانویه 2017 قابل دسترسی است).
ژاپن: راهنمای رسمی در دسترس آنلاین: http://www.jnto.go.jp/eng/location/regional/maps (در 16 ژانویه 2017 قابل دسترسی است).
مائیلارو، ن. Varasano، A. میراث فرهنگی آلبانی در اینترنت. در دسترس آنلاین: http://caspur-ciberpublishing.it/index.php/scires-it/article/view/10177/9511 (در 16 ژانویه 2017 قابل دسترسی است).
لراریو، آ. Maiellaro، N. Mappe Interattive در Promozione Turistico-Culturale. در دسترس آنلاین: http://caspur-ciberpublishing.it/index.php/scires-it/article/view/10939/10122 (در 16 ژانویه 2017 قابل دسترسی است).
پروژه نقشه برداری منابع فرهنگی در دسترس آنلاین: http://cavanmonaghan.net/en/thingstodo/resources/Culturalmappingfinalreport20110629.pdf (در 16 ژانویه 2017 قابل دسترسی است).
اوکابه، م. Ito, K. Color Universal Design. در دسترس آنلاین: http://jfly.iam.u-tokyo.ac.jp/color (در 16 ژانویه 2017 قابل دسترسی است).
جن، LS موانع و روش‌های ترویج استفاده از رایانه در میان سالمندان. INTI J. 2004 ، 1 ، 298-305. [ Google Scholar ]
Model–View–Controller. در دسترس آنلاین: https://en.wikibooks.org/wiki/Computer_Science_Design_Patterns/Model%E2%80%93view%E2%80%93controller (در 16 ژانویه 2017 قابل دسترسی است).
نقشه های گوگل برای هر پلتفرم در دسترس آنلاین: https://developers.google.com/maps (در 16 ژانویه 2017 قابل دسترسی است).
فیلدینگ، سبک های معماری RT و طراحی معماری های نرم افزاری مبتنی بر شبکه . دانشگاه کالیفرنیا: ایروین، کالیفرنیا، ایالات متحده آمریکا، 2000. [ Google Scholar ]
طراحی وب سایت واکنشگرا HTML. در دسترس آنلاین: http://www.w3schools.com/html/html_responsive.asp (در 16 ژانویه 2017 قابل دسترسی است).
در مورد سیستم رای گیری لایک/نپسندیدن به کمک نیاز دارید. در دسترس آنلاین: http://stackoverflow.com/questions/6589146/need-help-on-like-dislike-voting-system (در 16 ژانویه 2017 قابل دسترسی است).
عمران، ع.ک. روپا، س. جنبه های تست تضمین کیفیت و یکپارچه سازی در برنامه های کاربردی مبتنی بر وب. بین المللی جی. کامپیوتر. علمی مهندس Appl. 2012 ، 2 ، 109-116. [ Google Scholar ]
سناراتنه، اچ. مبشری، ع. علی، ال. کاپینری، سی. هاکلی، ام. مروری بر روش‌های داوطلبانه ارزیابی کیفیت اطلاعات جغرافیایی. بین المللی جی. جئوگر. Inf. علمی 2016 ، 31 ، 139-167. [ Google Scholar ] [ CrossRef ]
شیائو، ال. Dasgupta، S. اندازه گیری رضایت کاربر از سیستم های اطلاعاتی مبتنی بر وب: یک مطالعه تجربی. در مجموعه مقالات هشتمین کنفرانس آمریکا در مورد سیستم های اطلاعاتی، دالاس، تگزاس، ایالات متحده آمریکا، 9 تا 11 اوت 2002. صص 1149–1155.

شکل 1. نقشه تعاملی قبرس – تصویر صفحه نمایش جلسه در وب سایت [ 5 ].

شکل 2. نقشه تعاملی مالت – تصویر صفحه نمایش جلسه در وب سایت [ 6 ].

شکل 3. نقشه تعاملی ژاپن – تصویر صفحه نمایش جلسه در وب سایت [ 7 ].

شکل 4. نقشه تعاملی “Gioia del Colle”. نقشه همه PoI ها را نشان می دهد زیرا “لغزنده زمان” (در سمت چپ، جدا از کادر) در قرن XX تنظیم شده است. اجزای اصلی نقشه تعاملی ما عبارتند از: “منو” ( سمت چپ ). “Callout” ( مرکز )؛ و “نوار کناری” ( سمت راست ).

شکل 5. تور مجازی “Distilleria Cassano” – یک شی چندرسانه ای سه بعدی که از طریق نقشه قابل دسترسی است. امکان فعال سازی طرح بندی سایت با نمایش تمامی دیدگاه های تور مجازی ( سمت راست ) وجود دارد.

شکل 6. ارتباطات متقابل بین دانش – بیان شده از طریق اشیاء چند رسانه ای – و PoI.s.

شکل 7. نقشه تعاملی – پنجره “Folder” ( سمت چپ ) با پیش نمایش تصویر. فعال کردن “نمایشگر تصویر” با پانل نمای کلی ( سمت راست ) امکان پذیر است.

شکل 8. نقشه تعاملی – پنجره «جدول» ( سمت چپ ) با توابع فیلتر و جستجو که از فراخوانی (در پس‌زمینه) و پنجره «کاشی» ( سمت راست ) فراخوانی می‌شوند.

شکل 9. نقشه تعاملی (نسخه بهبود یافته برای آلبانی) – “Callout” با توضیحات گسترده ( مرکز ). در “منو” (باز شده در سمت چپ ) عملکرد “ماهواره” و “نمایش اسلاید” فعال هستند، سپس نقشه در نمای زمین است و نمایش اسلاید در پایین اجرا می شود. نقشه فقط PoI. های متعلق به “مجموعه معماری” را نشان می دهد، که تنها نوع روشن در نوار کناری ( سمت راست ) است.

شکل 10. نقشه تعاملی – افسانه پویا با مترهایی که تعداد PoI ها را بر اساس نتایج جستجو برای “nic” ( سمت چپ ) نشان می دهد. افسانه در سطح PoI ( مرکز ) باز شد. پنل فیلتر ( سمت راست ).

شکل 11. معماری برنامه تک صفحه ای (SPA).

جدول 1. مقایسه ویژگی‌های نقشه‌های تعاملی مورد استفاده در مطالعات موردی و نقشه ما (توابع محتوای غیر کاربردی و/یا ناقص وجود ندارند). PoI، نقطه مورد علاقه؛ سئو، بهینه سازی موتورهای جستجو

© 2017 توسط نویسندگان. دارنده مجوز MDPI، بازل، سوئیس. این مقاله یک مقاله با دسترسی آزاد است که تحت شرایط و ضوابط مجوز Creative Commons Attribution (CC BY) ( http://creativecommons.org/licenses/by/4.0/ ) توزیع شده است.

;کاربردهای GIS مقالات

درخواست مشاوره

09120049370

8 صبح تا 12 شب