كيف يمكنك تحويل رسومات يدوية الى اكواد HTML ؟

المدونة > كيف يمكنك تحويل رسومات يدوية الى اكواد HTML ؟




كيف-يمكنك-تحويل-رسومات-يدوية-الى-اكواد-HTML-؟
إشترك في قناة التيليجرام الخاص بنا من أجل الحصول على آخر المقالات، إضغط هنا.

المقدمة

يتطلب تصميم صفحات الويب ذات الواجهة الواحدة (على الأقل) معرفة أساسيات كل من لغة البرمجة CSS و HTML وجهد في عملية كتابة الأكواد مع ضبط التجاوب على جميع أنواع الأجهزة والشاشات. هذه العملية تأخذ وقتاً طويلاً لإنجازها. ماذا لو أصبحت هذه العملية هي عبارة عن رسم لما تريده على ورقة بيضاء ومن ثم يتم تحويلها تلقائياً الى اكواد HTML و CSS مع ضبط تجاوبها على جميع انواع المتصفحات والشاشات والأجهزة! رائع اليس كذلك ؟

حيث قامت شركة مايكروسوفت الأمريكية في الثالث من شهر أكتوبر من عام 2018 بإطلاق تقنية جديدة تدعى Sketch2Code تعتمد على الذكاء الإصطناعي بشكل أساسي. حيث أحدثت هذه التقنية ضجة كبيرة في عالم التقنية. بعدما قامت الشركة بإطلاق موقع إلكتروني يعمل على تحويل الرسوم اليدوية لصفحة ويب إلى صفحة HTML بكامل المميزات التي تريدها بمجرد رسمها على ورقة بيضاء وبصورة واضحة.


كيف يتم تحويل الرسوم اليدوية إلى أكواد HTML ؟

دعنا نفهم كيفية عمل هذه التقنية وما هي المراحل التي تمر بها الصورة التي ترسمها ليتم تحويلها إلى كود HTML:

  1. يقوم المستخدم برفع صورة واضحة للرسمة التي قام برسمها والتي يجب أن تكون واجهة قريبة للواجهة المطلوبة أو ما يسمى بواجهة المستخدم User Interface أو UI.
  2. تتنبأ هذه التقنية محتويات هذه الصورة وتحليلها ومعرفة كامل اجزائها ليتم تحويلها الى كود HTML، كما هو موضح في الصورة أدناه.
  3. تقوم خدمة التعرف على النص باستخراج النصوص من الصورة التي تم رفعها وتحديد مواقعها جيداً.
  4. بعد ذلك تقوم احد الخوارزميات الخاصة بالتقنية بتحديد أماكن العناصر التي تم إكتشافها من أجل توليد شكل يستوعب هذه العناصر كافة.
  5. وفي النهاية يتم تشغيل أحد الخدمات الموجودة في هذه التقنية ليتم تحويل تلك المعلومات التي تم جمعها من الصورة التي رفعتها إلى كود HTML حقيقي قابل للاستخدام الفعلي.

تحويل رسمة إلى كود HTML



ما هي العناصر التي يستخدمها Sketch2Code ؟

  1. نموذج الرؤية المخصص من شركة Microsoft: تم تدريب هذا النموذج على تمييز عناصر الـ HTML الأكثر شهرة (التي تحويها صفحات الويب) كـ الأزرار والحقول والصور والنصوص وغيرها.
  2. خدمة تحديد النص المقدمة من شركة Microsoft: حيث تقوم هذه الخدمة بتحديد النصوص الموجودة داخل العناصر التي تم إكتشافها.
  3. خدمة Azure السحابية: والتي تعمل على تخزين كافة المعلومات التي تم استخراجها بالإضافة إلى الصورة الأصلية.
  4. الدوال الخاصة بخدمة Azure: والتي تعمل كنقطة إدخال لعملية توليد الكود من خلال القيام بتنظيم سير العملية وترتيبها جيداً.
  5. موقع Azure: والذي يقوم بالتجاوب مع المستخدمين ويسمح لهم برفع صور رسماتهم ليقوم بإعطائهم الناتج الخاص بصفحة الـ HTML المرسومة.
حيث يمكن تلخيص هذه العملية بالمخطط التالي:

مخطط يوضح عمل Sketch2Code



روابط مهمة



الخلاصة

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

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

ما رأيك عزيزي القارئ بهذه التقنية وما سوف تحدثه من تغيير في مجال برمجة صفحات الويب؟ شاركنا رأيك في التعليقات.

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

هل كانت هذه المقالة مفيدة ؟
نعم
كلا