نمایشگاه مجازی، بسته چند رسانه ای به سبک وب

من از سال ۸۳ با تولید و توسعه بسته های چند رسانه ای (Multimedia) سر و کار دارم. اول بزارین براتون بگم بسته های چند رسانه ای چی هستن و بعدش بریم سراغ تجاربی که من در این مسیر کسب کردم.

بسته چند رسانه ای (Multimedia) چیه؟

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

این بسته ها چطوری تولید میشن؟

با اینکه این بسته ها هم یک نرم افزار عادی به نظر میرسن، اما تولید چنین نرم افزارهایی در بسترهای مرسوم برنامه نویسی مثل C#، دلفی و ... زیاد کار جالبی به نظر نمیرسه. درسته که میشه تمامی امکانات مورد نیاز یک مالتی مدیا رو توی C# هم داشت، اما آماده کردن این بستر خیلی طول میکشه. از طرفی بسته های مالتی مدیا قراره روی یک DVD قرار بگیرن و بصورت Autorun اجرا بشن، اونم بدون هیج وابستگی به نرم افزار دیگری. در صورتیکه عموما دسکتاپ اپ هایی که با C# تولید میشن پیش نیاز نصب Dot Net Framework رو با خودشون دارن.

و اما پلتفرمهای تولید چنین اپ هایی. تا حدود سال ۸۷ بهترین گزینه نرم افزار Multimedia Builder بود، اما از اونجا که دیگه توسعه داده نشد گزینه بهتری براش پیدا شد و اون Autoplay Media Studio بود. این نرم افزار هم توی سالهای اخیر زیاد بروز رسانی نشده اما هنوزم نیاز رو برطرف می کنه و مشکل خاصی نداره. این نرم افزار به شما امکان استفاده از ابزارهایی مثل قرار دادن دکمه، عکس، متن، صفحه اینترنتی، pdf، نمایش فیلم، نمایش صوت و ... رو میده. از طرفی بوسیله زبان Lua میشه داخلش کد نویسی کرد و همچنین میشه از پلاگین های اضافی که با همین زبان براش نوشته شده استفاده کرد. اما این بستر نرم افزاری یه مشکل داره و اونم اینکه امکاناتی که به شما برای طراحی ظاهر اپ اتون میده محدود به عکس و ... است و در عمل می بینیم که خروجی کار میتونه یه اپلیکیشن تقریبا بدون هیچ انیمیشنی باشه.

پس از همون سالها یک بستر دیگه هم با وجود تمام مشکلاتی که در توسعه مالتی مدیا داشت مورد استفاده قرار می گرفت و اون Flash MX خدا بیامرز یا همون Adobe Flash جوان هست. فلش بستر خوبی برای تولید انیمیشنه و البته داخلش میشه فیلم و صدا پخش کرد، عکس رو در قالب گالری زیبایی که خودتون می سازین نمایش داد و کلی امکانات دیگه. عملا میشه گفت خروجی فلش یک انیمیشن ۲ بعدی با امکان تعامل و قابلیت های چند رسانه ای هست.

نمایشگاه مجازی، بسته چند رسانه ای به سبک وب!!!

من اوائل، بسته های مالتی مدیامو با multimedia builder و بعدش با Autoplay Media Studio تولید میکردم. تا اینکه سال ۹۱ برای تولید یه بسته ازم خواسته شد روی انیمیشنش بیشتر تمرکز کنم. از Adobe Flash استفاده کردم، قرار بود کلی اطلاعات رو نمایش بدم، بنابراین از دیتابیس SQLite استفاده کردم. راستش مزخرف ترین تجربه برنامه نویسی عمرم شد اون پروژه. فلش با ActionScript 2 , 3 کد زنی میشد. میشه گفت خیلی بی قاعده عمل میکرد، خیلی قلق ای بود. همون کدی که یه جا کار میکرد، توی یه شرایط ۹۰% مشابه و فقط بواسطه یه مقدار تو در تو تر شدن لایه های انیمیشنی دیگه عمل نمیکرد. خلاصه که از نظر من زبان نبود. منطقی عمل نمیکرد و با سختی تونستم رامش کنم و توی موقعیتهایی که میخوام نتیجه لازمو ازش بگیرم.

بعد از اون باز تولیداتم بدون انیمیشن بود و از فلش دیگه استفاده نکردم.

تا اینکه امسال (سال ۹۳) از طرف وزارت آموزش و پرورش - سازمان پژوهش و برنامه ریزی کشور (رشد) ازم خواسته شد بسته هایی رو  با عنوان بسته بر فراز آسمان و برای آموزش معلمین برای تدریس کتابهای درسی جدید کار کنیم.

داستان فنی کار ما از چند وقت قبلش شروع شده بود و توی این پروژه به اوج خودش رسید!!!

بسترهای تولید مالتی مدیایی که ازشون صحبت کردم یه مشکل جدی داشتن و اون اینکه بیشتر برای بسته های با تعداد کمی عناصر (فیلم، صوت، عکس و ...) طراحی شده بودن، و وقتی مثلا یک بسته شامل ۴۰۰ دقیقه ویدیو می شد و هر ویدیو حدود ۵ دقیقه بود، به عبارتی ۸۰ ویدیو در این بسته قرار داشت، روند اجرای بسته بسیار کند میشد.

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

آیا میشه بوسیله تکنولوژی های وب (HTML + CSS + JS) بسته مالتی مدیا تولید کرد؟!

جواب این سوال مثبت بود، البته که گرفتن یک نتیجه با کیفیت با این روش و ایده برای من به این سادگیا نبود. برای پیاده سازی این روش من مجبور شدم چند هزار صفحه اینترنتی رو در طی ۳ ماه مطالعه و تست کنم.

سرگذشت تولید بسته چند رسانه ای (Multimedia) با استفاده از تکنولوژی های وب و چالشهایی که داشت!

قدم اول: پلاگین Web در Autoplay Media Studio

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

اما در عمل قضیه پیچیده شد. پنجره وبی که Autoplay Media Studio به من میداد اینترنت اکسپلورر ۶ بود. این یعنی فاجعه. مشکلاتش:

1. گیرهای شدیدی که توی طراحی وبسایت برای اینترنت اکسپلورر ۶ هممون تجربه کردیم
2. نبود CSS 3  و محدودیت های فوق شدید برای پیاده سازی انیمیشن
3. مشکلاتی در اجرای جاوا اسکریپت

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

قدم دوم: تولید مرورگر بدون Frame

خوب من دنبال این بودم پنجره وبی که صفحه اینترنتی منو نشون میده گوگل کروم باشه. میدونستم گوگل کروم یه هسته داره به نام Chromium که وظیفه رندر html + css + js به عهده اونه. سروس chromium توی اینترنت بود. با کلی آزمون و خطا من تونستم اون رو اجرا کنم. اما نتونستم مجبورش کنم یه صفحه خاص رو اجرا کنه و خیلی مشکلات دیگه باهاش داشتم. مثل اینکه نمیتونستم بهش بفمونم کاربر من دکمه خروجو زده، بسته شو عزیز من!

تا به این نقطه رسیدم ۱ ماهی طول کشید، خروجی کار کاربردی نبود و نمیتونستم باهاش بسته ای تولید کنم. اما برای رسیدن به همین نقطه بیش از ۲۰۰۰ صفحه اینترنتی رو خوندم.

قدم سوم: استفاده از Node Webkit (بروز رسانی: نام جدید پروژه NW.js)

در حین سرچ هام به یه پروژه ای برخوردم که به تازگی لانچ شده بود. Node Webkit یک اپلیکیشن بود شامل هسته chromium + Node.js . کنار هم قرار گرفتن این دو تا باعث میشد با HTML +CSS + JS بتونی ظاهر و عملکرد اپ ات رو بسازی و با Node.js بتونی با خود اپلیکیشنت ارتباط بگیری و کارهای سیستمی رو مثل خروج، Minimize و کارهای دیگه رو ازش بخوای.

از طرفی میتونستی با استفاده از dll و ماژولهای Node.js قابلیت های جدیدی به نرم افزارت اضافه کنی.

این روش بسیار جذاب و سبک بود. دقیقا همون چیزی که میخواستم.

پس دست به کار شدم. در بازه ۱ ماه تونستم یه سری کد پایه ای تولید کنم برای تولید مالتی مدیا. بسته ای که در نهایت با این روش کار کردم مزایایی داشت:

1. چند صد دقیقه فیلم، چند صد دقیقه صوت، چند صد تا عکس و چند هزار صفحه pdf رو در یک بسته نشون بده و کاملا سبک هم باشه
2. بطور ۱۰۰% به نصب هیچ نرم افزار دیگه ای نیاز نداشته باشه (فیلم، صوت، عکس و PDF رو نمایش بده)، بسترهای قبلی حداقل به نصب Adobe Reader نیاز داشتن.
3. نیاز به نصب هیچ فونتی نداشت و فونتها درون نرم افزار بود.
4. از اونجا که بسته ها برای معلمین تولید میشد، حداقل سخت افزاری که باید روی اون اجرا میشد کامپیوتری با ۱ گیگ رم و ویندوز XP بود، که توی این قضیه هم با سرعت قابل قبولی و بدون مشکل سر بلند شد این روش توسعه.
5. بواسطه اینکه بستر توسعه وب بود بسیار سرعت توسعه بالا رفت و دستم باز بود. مثلا از اونجاییکه برای بالا بودن سرعت اجرا میخواستم مدت زمان فایلها و تعداد صفحات PDF ها بصورت استاتیک نمایش داده بشه، نرم افزار دیگه ای نوشتم که برام فایلهای ویدیویی، صوتی یا PDF رو میخوند، ازم عنوان هر فایل رو میگرفت و مدت زمان اشون رو در میاورد و با اسم فایل و بقیه اطلاعات مورد نیازش در قالب کد HTML میکرد و بهم میداد
6. میتونستم نرم افزارم رو به گونه ای طراحی کنم که علاوه بر ویندوز در لینوکس و مک هم اجرا بشه.

نتیجه گیری

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

بسته های تولید شده بوسیله این روش

• بسته های بر فراز آسمان ۲  (بیش از ۱۳ بسته) - ۱۳۹۳ - بسته های آموزش معلمین مقاطع پنجم و هشتم جهت تدریس دروس مختلف از جمله فارسی، علوم، ریاضی، هدیه های آسمان، و ...
• بر فراز آسمان ۳ (بیش از ۱۸ بسته) - ۱۳۹۴ - بسته های آموزش معلمین مقاطع ششم و نهم جهت تدریس دروس مختلف از جمله فارسی، علوم، ریاضی، هدیه های آسمان، کار و فناوری و ...
• بر فراز آسمان - کلاس های چند پایه - ۱۳۹۷

بروز رسانی (۹۶/۰۵/۰۴)

بعد تر علاوه بر Node Webkit که البته اسمش NW.js شده، روشهای دیگه ای هم مثل پروژه Electron معرفی شد. پس اگر میخواید از این روشها استفاده کنین، میتونین سرچی روی روشهای تولید دسکتاپ اپلیکیشن ها بصورت Cross Platform داشته باشین.