إطلاق العنان لإمكانيات HTML5 و CSS3

كان إصدار HTML5 و CSS3 أقل من قفزة في التطور ، ومع ذلك فإن القليل من المصممين يستخدمون الكثير من الميزات الجديدة التي توفرها التكنولوجيا. يعود السبب في ذلك إلى أن الإمكانات الكاملة لـ HTML5 و CSS3 قد تم تجاهلها ، لذا يستمر الناس في تطوير نفس المواقع بشكل أو بآخر ، مع اختلافات طفيفة في الترميز.

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

لا تتجاهل اللوحة

يعد التعامل مع كائن لوحة الرسم إحدى المهام الأكثر صعوبة لمبرمج HTML5 الجديد ، خاصة عندما يكون المبرمج قد تم ترميزه مسبقًا في إصدارات أخرى من HTML وليس لديه خلفية في برمجة رسومات الكمبيوتر.

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

التوضيح مجاملة من ماجي ابليتون

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

لست بحاجة إلى Flash بعد الآن

لا يتطلب معظم ما استخدمناه سابقًا Flash لـ Flash. يمكنك الآن إجراء كل ذلك باستخدام تحويلات CSS3 ، و HTML5 للرسم ، و HTML5 animation ، و HTML5 video ، و HTML5 audio.

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

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

يعطيك CSS3 فئات زائفة جديدة

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

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

يمكن لصفحات الويب الخاصة بك التواصل مباشرة مع GPU

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

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

لا يعمل تسريع وحدة معالجة الرسومات مع المتصفحات القديمة ، حتى إذا كانت تدعم HTML5 و CSS3.

gif من باب المجاملة كلاوديو سالاس

استخدم محركات الألعاب لأخذ العمل الشاق من رسومات 3D

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

واحد من أبسط الخطوات للبدء هو PlayCanvas ، وعلى الرغم من أنه مجاني للتجربة ورخصًا فعلاً للحصول على ترخيص شخصي ، إلا أنه ليس خفيفًا. من هنا انقضاض، لعبة تم إنشاؤها في PlayCanvas:

 

وهذا هو RoboStorm:

هل يمكنك إنشاء ألعاب مثل هذا؟ على الإطلاق ، وهو الآن أسهل بكثير من أي وقت مضى.

لتجربة بناء لعبة الرجعية ، حاول Construct2 or Construct3. انها حصلت على كل ما تحتاجه لبدء إنشاء ألعاب على أساس السحب والإسقاط (على الرغم من أن البعض سيجد هذا الحد جداً). تنشئ ألعابك على الإنترنت ويعبّرها الناس عبر الإنترنت. إنه محرك لأولئك الذين لا يعرفون أي برمجة ولا يريدون إزعاج التعلم.

وهنا قصة كيوي، ومنصة 2D لمنصة المدرسة القديمة تم إنشاؤها في Construct3:

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

يمنحك HTML5 و CSS3 المزيد من الطاقة

باستخدام HTML5 و CSS3 ، يمكنك الآن التحكم الكامل في كل عنصر يظهر على صفحتك ، بما في ذلك القدرة على معالجة كل عنصر عمليًا بأي طريقة تريدها. wish.

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

يمكنك الآن التحكم في التعتيم والتوسيع بسهولة أكبر من ذي قبل ، وستعمل التقنيات عبر جميع المتصفحات الرئيسية.

اعتبارًا من وقت الكتابة في 2018 مبكرًا ، لا تزال هناك بعض المشكلات المتعلقة بالقياس بين المتصفحات المختلفة ، مع بعض المتصفحات القادرة على التدرج بدقة بينما يعطي البعض الآخر نتائج مختلفة تمامًا لنفس الصفحة.

هذا يعني أننا على الأقل في الوقت الحالي لا نزال عالقين في الاضطرار إلى برمجة إصدارات مختلفة من الموقع إذا أردنا استخدام التحجيم من أجل responsive الأغراض.

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

ومع ذلك ، فإن هذه المشاكل ليست مشاكل HTML5 أو CSS3 ، فهي مشكلات فشل مطورو المتصفح في دعم الميزات التي يوفرها HTML5 و CSS3 بشكل صحيح.

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

رأس الصورة مجاملة من شون رايان