الانتقال من الفلاش إلى html5

في نوفمبر 2011 ، أعلنت شركة Adobe أنها ستتوقف عن تطوير Flash Player للأجهزة المحمولة بعد إصدار Flash Player 11.1 لأجهزة Android و BlackBerry Playbook ، واختارت بدلاً من ذلك التركيز على أدوات إنشاء تطبيقات HTML5 للأجهزة المحمولة. على الرغم من أن Adobe قد كررت دعمها لـ Flash Player لمتصفحات الكمبيوتر الشخصية ، إلا أن الكثيرين يعتقدون أن الأمر مجرد مسألة وقت قبل أن يقوم Adobe أيضًا بإنهاء دعم إصدار الكمبيوتر. هذه أخبار سيئة للشركات التي تستثمر بكثافة في تطبيقات الفلاش ، وكذلك للمطورين الذين استثمروا وقتًا في اكتساب مهارات البرمجة المطلوبة لبناء تطبيقات الفلاش.

دعونا نلقي نظرة على بعض الاختلافات بين Flash و HTML5 ونقدم بعض النصائح والأدوات للمساعدة في تسهيل الانتقال بين هذين النظامين.

أساسيات فلاش منصة

غالبًا ما يستخدم Flash كمصطلح مظلة للإشارة إلى نظام Adobe الأساسي الذي يتكون فعليًا من المكونات التالية:

• فلاش: أداة تستخدم في المقام الأول لتصميم وإنشاء الرسوم المتحركة
• Flex: بيئة التطوير المستخدمة لإنشاء التطبيقات ، بما في ذلك مجموعة تطوير البرمجيات (SDK)
• MXML: لغة الترميز المستخدمة في مشاريع Flash
• أكشن: لغة البرمجة

لتشغيل تطبيق Flash في مستعرض ويب ، يجب تنزيل المكون الإضافي Flash Player. كبديل ، يمكن تجميع تطبيق Flash لتشغيله في بيئة وقت تشغيل سطح مكتب Adobe AIR. مرة أخرى ، يجب تثبيت Adobe AIR على كمبيوتر المستخدم لتشغيل تطبيق AIR.

يستخدم Flash تنسيقات الملفات الرئيسية التالية:

• .fla: ملف مشروع فلاش
• .flv: ملف فيديو فلاش
• .swf: ملف تطبيق Compiled Flash / Flex قد يحتوي على ملفات. flv

أساسيات منصة HTML5

HTML5 عبارة عن نظام أساسي قياسي مفتوح يتكون من التالي:

• HTML5: لغة الترميز المستخدمة لإنشاء صفحات الويب
• أوراق الأنماط المتتالية 3 (CSS3): لغة ورقة الأنماط المستخدمة لتحديد التنسيق للكائنات على صفحة ويب HTML5
• واجهات برمجة التطبيقات (API): واجهات برمجة التطبيقات لدعم ميزات مثل السحب والإفلات ورسائل المستندات المتقاطعة
• JavaScript: لغة البرمجة النصية المستخدمة مع HTML5 لتمكين الرسوم المتحركة

تتمثل إحدى ميزات HTML5 في أنه يعمل على متصفحات الويب بشكل أصلي ولا يتطلب مكونًا إضافيًا. ومع ذلك ، لتشغيل بشكل صحيح ، يجب أن يدعم المستعرض ميزات HTML5 و CSS3 لصفحة ويب HTML5. تتمتع المتصفحات الرئيسية بمستويات مختلفة من الدعم لـ HTML5 و CSS3 ، ولم يكتمل التنفيذ. يتم دعم JavaScript تقريبًا عالميًا بواسطة المتصفحات ؛ ومع ذلك ، لدى المستخدمين خيار "إيقاف" JavaScript ، وفي هذه الحالة لا يتم تشغيل البرامج النصية من جانب العميل التي تم إنشاؤها باستخدام JavaScript.

تتضمن تنسيقات ملفات HTML5 ما يلي:

• .htm / .html: ملف صفحة ويب HTML5
• .css: ملف ورقة أنماط CSS3

اعتبارًا من عام 2011 ، لا تحدد مواصفات HTML5 الحالية تنسيقات ملفات الفيديو المدعومة ، مما يجعل الأمر متروكًا للمتصفحات الفردية لاختيار التنسيقات التي سيتم دعمها. التنسيقات المدعومة الحالية تشمل ما يلي:

• .mp4: ملف فيديو MPEG 4 مع ترميز فيديو H.264 وترميز صوت AAC
• .webm: ملف فيديو WebM مع ترميز الفيديو VP8 وترميز الصوت Vorbis
• .ogg: ملف فيديو Ogg مع برنامج ترميز الفيديو Theora وبرنامج ترميز الصوت Vorbis

تحويل مشاريع فلاش إلى HTML5

يعد تحويل مشروع Flash معقدة إلى HTML5 يدويًا عملية كثيفة العمالة وتستغرق وقتًا طويلًا ، بسبب اختلافات النظام الأساسي. يجب على المطور تحويل الرسوم المتحركة التي تم إنشاؤها باستخدام Flash و ActionScript إلى HTML5 و JavaScript. لحسن الحظ ، هناك بعض الأدوات التي تساعد على أتمتة التحويل من Flash إلى HTML5.

أصدرت Adobe Wallaby ، وهي أداة تجريبية يمكن تنزيلها مجانًا من موقع Adobe Labs على الويب. يأخذ Wallaby ملف مشروع Flash (.fla) كمدخلات ويصدر HTML5 ويدعم ملفات CSS و JavaScript. ومع ذلك ، تحتوي ملاحظات إصدار Wallaby على قائمة طويلة إلى حد ما من الميزات التي لم يتم تحويلها - وأهمها ActionScript والأفلام والصوت. Wallaby هي أداة محدودة مصممة بشكل أساسي لتحويل محتوى رسومي متحرك إلى HTML5 ، بحيث يمكن دمجها في صفحات الويب باستخدام أداة تصميم صفحة ويب.

أصدرت Google Labs أداة Swiffy ، وهي أداة مجانية تستند إلى الويب وتحول ملف تطبيق Flash مترجم (.swf) إلى HTML5. يمكن بعد ذلك تضمين المخرجات في صفحة ويب ولكن ليس من السهل على أي مطور تحريرها. مثل Wallaby ، Swiffy لا يقوم بتحويل جميع ميزات Flash. Swiffy يدعم تحويل ActionScript ، ولكن فقط الإصدار 2.0 (ActionScript موجود حاليًا في الإصدار 3.0). يعمل إخراج Swiffy فقط على المتصفحات التي تدعم Scalable Vector Graphics (SVG).

Edge ، أداة تطوير جديدة لـ HTML5

نظرًا لأن HTML5 يصبح النظام الأساسي المفضل ، فقد ظهرت أدوات جديدة لتوفير بيئات التصميم والتطوير التي تدمج HTML5 و CSS3 و JavaScript.

في أغسطس 2011 ، أصدرت Adobe إصدار معاينة لأداة تطوير Edge. تمكّن Edge المصمم من إنشاء رسوم متحركة لـ HTML5 وإضافة رسوم متحركة إلى مشاريع HTML5 الحالية. سيتعرف مصممو الفلاش على بعض العناصر المألوفة في واجهة مستخدم Edge ، بما في ذلك المرحلة ونافذة الخصائص وخط وقت الرسوم المتحركة. على الرغم من ذلك ، تقوم Edge بإنشاء ملفات CSS و JavaScript ، ويتم تخزين محتوى الرسوم المتحركة الخاص بها في بنية بيانات JavaScript Object Notation (JSON).

في وقت كتابة هذا التقرير ، توقعت Edge إصدار المعاينة الرابع. يتم إضافة ميزات جديدة إلى كل إصدار.

تحويل يوتيوب إلى HTML5

إحدى علامات الانتقال إلى HTML5 هي أن YouTube يقدم الآن خيار استخدام مشغل فيديو HTML5 لعرض مقاطع الفيديو.

قبل تقديم خيار HTML5 ، تم تسليم جميع مقاطع فيديو YouTube عبر مشغل فيديو Flash. يمكن للمستخدمين تحميل ملفات الفيديو بأي تنسيق تقريبًا ، وسيحول YouTube بعد ذلك كل فيديو إلى تنسيق Flash (.flv) المطلوب.

يقوم YouTube الآن أيضًا بترميز مقاطع الفيديو باستخدام برنامج ترميز الفيديو H.264 وتنسيق WebM للتسليم HTML5. لعرض مقاطع الفيديو بتنسيق HTML5 ، يجب أن يكون لديك متصفح يدعم علامة فيديو HTML5 وتنسيق فيديو يستخدمه YouTube.

تراث الفلاش

كما ذكرنا سابقًا ، يواصل Adobe تطويره على إصدار الكمبيوتر الشخصي من Flash Player - حتى الآن. حتى إذا توقف Adobe عن دعم Flash Player في المستقبل ، فستظل تطبيقات Flash القديمة مدعومة على الويب - على الأرجح لسنوات. لذلك ، Flash لن يزول تمامًا في أي وقت قريب. تتوفر الأدوات لتحويل تطبيقات Flash إلى تطبيقات HTML5 ، ولكن في الوقت الحالي ، لا تدعم هذه الأدوات تحويل جميع ميزات Flash. نظرًا لأن معيار HTML5 أصبح مهيمنًا ، فمن المحتمل أن تصبح أدوات تحويل ملفات Flash أكثر تطوراً ، وسيتم إنشاء أدوات جديدة لتطوير المحتوى باستخدام نظام HTML5 الأساسي.