15 دروس وموارد HTML5 لمطوري الويب 2022
نشرت: 2022-02-28الويب هو عمل المهندس المعماري ، المصمم. الأساس في يد المصمم والمطور. يمكننا استخدام HTML لبناء مواقع الويب والبرامج والمشاريع والتطبيقات للعصر الرقمي. لكي يفهم متصفح الويب موقع الويب ويفسره ، يجب أن يتم ترميزه وفقًا للمعايير ، وفي معظم الأحيان يكون هذا المعيار هو HTML ، مع إضافة CSS و JavaScript.
هناك بعض الفوائد المجزية لإتقان HTML5. مع خبرة كافية ، يمكنك أن تصبح مطورًا أماميًا مستقلاً وتكسب المال من تطوير مواقع الويب للآخرين. ومع ذلك ، فإن الشيء الأساسي هو أن HTML5 يمنحك القدرة على إنشاء ما تريد على الويب. ربما مهما كان مصطلحًا واسعًا ، ولكن فيما يتعلق بتطوير وتصميم مواقع الويب ، فإن HTML5 هي أفضل فرصة لك للنجاح. توجد أطر عمل ممتازة هذه الأيام يمكن استكمالها بمعرفتك بـ HTML5 لبناء تجارب رقمية فريدة وديناميكية.
نشر العديد من المطورين المخضرمين والخبراء كتبًا عن أن يصبحوا مطورًا للواجهة الأمامية - شخص يعرف CSS و HTML -. في حين أن هذه الكتب رائعة ، إلا أنها يمكن أن تتخلف بسرعة عن ما يحدث في تطوير الويب. ليست أي من اللغتين - HTML أو CSS - ثابتة ، ولكنها تتغير دائمًا ويتم تحسينها لتقديم أدوات وتقنيات أكثر دقة لبناء مواقع الويب الحديثة. لذلك مع هذا النهج ، فإن البديل الجيد لتعلم HTML5 هو من خلال البرامج التعليمية على الويب والأدلة والإرشادات حول كيفية عمل ميزات معينة أو كيفية تحقيق تصميم معين. نقدم لك أفضل وأحدث وأحدث البرامج التعليمية والموارد حول كيفية أن تصبح محترفًا في HTML5 في غضون أسابيع.
تحسين تدفق المستخدم عبر انتقالات الصفحة
إذا كنت تخطط لدراسة HTML5 وتطوير الويب الأمامي بشكل عام ، فسيتعين عليك حتمًا التعرف على تجربة المستخدم وكل ما تقدمه. من الجيد أن تكتب رمزًا أنيقًا ، ولكن يكون الأمر أجمل عندما يعكس الرمز الذي تكتبه فهمك لما يجب أن تشعر به تجربة المستخدم القوية لمواقع الويب والتطبيقات. يقضي عدد لا يحصى من الخبراء في هذه الأيام وقتهم في تحليل أداء الصفحة وأحدث الأفكار حول ما يجعل المستخدم يظل على الصفحة ، وما الذي يجعله يغادر الصفحة. توضح لنا إحدى أحدث دراسات الحالة البحثية أنه يمكن تحسين انتقالات الصفحة لتقديم تجربة مستخدم محسّنة.
تقليديًا ، نعتمد على الانتقال الافتراضي عندما نضغط على الصفحة الجديدة لموقع الويب ، وعلينا الانتظار حتى يقوم المتصفح بإعادة تحميل تلك الصفحة. على الرغم من أن بعض السمات والمطورين يدركون مدى عدم كفاءة هذا المفهوم ، فإننا لن نرى هذا التغيير العالمي لكيفية عرض انتقالات الصفحة في أي وقت قريبًا ، ما لم يكن بالطبع ، سنقوم بتجربته بأنفسنا ونشره تدريجيًا كلمة عنها. ستجد في هذا البرنامج التعليمي الأدوات والمعلومات المطلوبة حول كيفية تضخيم انتقالات صفحتك حتى لا يضطر المتصفح إلى إعادة تحميل كل صفحة جديدة يفتحها زوارك ، مما يُعد إثراء مذهلاً لتجربة المستخدم العالمية التي توفرها تطبيقات سطح المكتب والجوال.
أنماط تصميم مستجيبة ذكية ، أو عندما لا يكون خارج القماش جيدًا بما فيه الكفاية
ما هو التصميم المستجيب الأصيل؟ هل هي مجموعة من الكتل والعناصر مخيطة مع الحد الأدنى من خصائص التصميم سريعة الاستجابة المرفقة؟ هناك الكثير من التصاميم السيئة التي تدور هذه الأيام. بينما يبدو غير تقليدي من الخارج ، إذا ألقينا نظرة أعمق على قاعدة الشفرة من الداخل ، فإن العديد من مواقع الويب الرائدة التي نراها اليوم تتجنب تمامًا أي إعداد هيكلي للطريقة التي يتم بها تقديم تصميم الصفحة ، مما يعني مشكلة بالنسبة لـ أولئك الذين يتعين عليهم القدوم وإصلاح هذا الرمز بعد ذلك.
هذه المقالة أقل تقنية وأكثر ثراءً في الأمثلة على كيفية قيام مواقع الويب المختلفة بعبث أنماط التصميم المتجاوبة وتوفر تقنيًا تجربة أسوأ بهذه الطريقة. بصفتك مطور HTML5 ، سترغب في معرفة أنماط التصميم التي يجب تجنبها وطرق هيكلة مشروعاتك بشكل أفضل للحفاظ على المرونة.
تصميم النموذج: كيفية تنسيق مدخلات المستخدم تلقائيًا
سيؤدي تصميم النماذج الجيدة إلى كسب بعض نقاط السمعة من زملائك المطورين ، وليس فقط منهم. مع هذا النمو الهائل في إمكانات المتصفح ، يعتاد المستخدمون ببطء على أشياء مثل إكمال النماذج الآلية. فكر في إجراء أي عمليات شراء عبر الإنترنت ، إذا كنت مستخدمًا متعطشًا لـ Google Chrome ، فستعرف أن Chrome يمكنه حفظ تفاصيل بطاقة الائتمان الخاصة بك في وقت لاحق ، لتسهيل الوصول إليها.
يركز هذا البرنامج التعليمي من Thoriq على وظيفة نماذج الإكمال التلقائي عندما يكتب المستخدم شيئًا ما في الوقت الفعلي. قد يكون هذا رقمًا تسلسليًا أو تاريخ ميلاد أو سلسلة من الأحرف التي تطلبها. يُحدث تصميم النموذج هذا فرقًا في كيفية عرض المستخدمين للمتصفح الذي يستخدمونه ومدى انفتاح مالك موقع الويب على جهود الإكمال التلقائي هذه ؛ من الممكن حظرهم ، لكنهم متاحون في الغالب. إن وجود وظيفة الإكمال التلقائي والفرز التلقائي يمكن أن يترك انطباعًا دائمًا للمستخدمين الذين يزورون لأول مرة. في بعض الأحيان يمكن أن يكون مفيدًا لقاعدة بيانات مشروعك ، حيث تتجنب إدخال المستخدمين لبيانات سخيفة وبدلاً من ذلك تقوم بتصحيحها تلقائيًا أثناء كتابتها.
كيفية إنشاء تخطيط موقع إخباري باستخدام Flexbox
Flexbox هو الآن الملك الرسمي للتنسيقات في تصميم الويب. يمكن أن تساعدك هذه الخاصية الصغيرة الرائعة في تصميم صفحة بدقة بكسل وأبعاد لا تشوبها شائبة من أي جهاز يتم الوصول إلى موقع الويب المحدد من خلاله. من الطرق الجيدة لاستكشاف إمكانيات Flexbox هي من خلال البرامج التعليمية ، فهي غالبًا ما تكون موجزة وتقدم العديد من الأمثلة حول كيفية تعديل شبكات وصفوف التصميم المختلفة للحصول على عرض مثالي على الصفحة. عمل Jeremy Thomas على إنتاج البرنامج التعليمي التالي لبناء مخطط لموقع إخباري أو مجلة إخبارية باستخدام خصائص تخطيط Flexbox فقط. تعرف على كيفية إنشاء أعمدة متجاوبة ، وضبط أبعادها من أجل وضوح التصميم ، ونقل المحتوى دون التضحية بالمظهر.
مقارنة بين تقنيات الرسوم المتحركة
يمكن أن يكون العثور على أداة الرسوم المتحركة المناسبة لك عملية صعبة ، فقط لأن هناك العديد من الخيارات الرائعة للاختيار من بينها! تتحسن المتصفحات في دعم الرسوم المتحركة ، ويستفيد المطورون بالتأكيد بشكل كامل من ذلك من خلال دفع حدود كيفية استخدام الرسوم المتحركة في تصميم الويب. يستكشف هذا المنشور حلين ، React Animations و Browser Native Animations - الأدوات المشمولة هي: CSS و Canvas و SMIL و Web Animations API و WebGL و GreenSock و Velocity.js و jQuery و Snap.svg و Three.js و Bodymovin و React Motion و GSAP. يوجد شرح موجز لإيجابيات وسلبيات كل من هذه الأدوات ، لذا كن واضحًا بشأن أهدافك واختر ما يناسبك. توجد بعض التعليقات الرائعة والثاقبة في الجزء السفلي من هذا المنشور حتى تتمكن من معرفة المزيد حول كل أداة هناك أثناء استكشاف الاقتراحات المختلفة التي لم تتم تغطيتها في المنشور نفسه.
تعد وسائل التواصل الاجتماعي جزءًا لا مفر منه من تصميم منظم جيدًا ، والخسارة في المشاركات الاجتماعية بسبب نقص الأدوات الاجتماعية هي مجرد غبية وغير عقلانية على أقل تقدير. ومع ذلك ، لا يركز هذا المنشور على أزرار المشاركة الاجتماعية الرائعة ، وبدلاً من ذلك ، يركز على جانب جديد من المشاركة الاجتماعية المعروفة باسم العلامات الوصفية الاجتماعية.
يمكن استخدام هذه العلامات الوصفية لمساعدتك في إنشاء محتوى متوافق اجتماعيًا يتم عرضه بطريقة أكثر دقة على شبكة اجتماعية معينة. بالنسبة إلى Twitter ، نعلم أن بطاقات Twitter هي التي تسمح لنا بمشاركة منشوراتنا على Twitter وإظهار الصورة / الوصف بجوار التعليق الذي كتبناه ، وبالنسبة إلى Facebook فهو نفس الشيء ، باستثناء القدرة على إسناد ائتمان المؤلف المناسب والذي يمكن ربطه مرة أخرى بحساب الشخص الرسمي على Facebook. هذا دليل متعمق تمامًا حول تحقيق دقة العلامات الوصفية بحيث تحصل مشاركاتك على مزيد من الظهور على جدران الوسائط الاجتماعية لأصدقائك ومتابعيك.
هل سبق لك أن تساءلت عن كيفية إنشاء مواقع الويب لأدوات مشاركة اجتماعية تظهر في أسفل الصفحة عندما تقوم بالتمرير لأعلى ولأسفل في صفحة معينة؟ إنه يسمى التذييل اللزج! تمامًا مثل أشرطة التنقل في الرؤوس اللاصقة ، أصبحت التذييلات اللاصقة شائعة للغاية بين أولئك الذين يرغبون في كشف المعلومات الأساسية بشكل أكثر ملاءمة ، فبالنسبة للبعض يكون التعرض لأزرار المشاركة الاجتماعية ، والبعض يستخدم وظيفة التذييل اللاصق لإظهار نموذج الرسائل الإخبارية بالبريد الإلكتروني ، والبعض الآخر سيفعل ذلك. استخدمه لبث أخبار مهمة حول الأعمال أو المنتج أو الموقع بشكل عام. الاستخدامات لأحدها قليلة جدًا ، لذا دع إبداعك يندمج مع هذا الأسلوب حيث تتعلم خمس تقنيات فريدة لتحقيق التذييل اللاصق على موقع الويب الخاص بك. يتضمن ذلك هوامش سالبة (نسختان) ، باستخدام ميزة calc () ، أو التنفيذ باستخدام Flexbox ، أو استخدام شبكة عالمية.
تحميل ملفات متعددة سهل في HTML5
يعد الحصول على تحميلات الملفات بشكل صحيح أمرًا ضروريًا ، حيث يقوم جزء كبير من مواقع الويب هذه الأيام بإدارة شكل من أشكال تحميل الملفات ، إما لاستخدام ملف التعريف الشخصي أو لاستخدام قائمة الميزات على مستوى الموقع. حتى عندما تقوم بإنشاء موقع ويب خاص بالمحفظة لنفسك ، فقد ترغب في تنفيذ شكل من أشكال تحميل الملفات لتسهيل إرفاق عناصر محفظة جديدة. لا يستغرق الأمر وقتًا طويلاً ، كما أن HTML5 تجعله سريعًا وآمنًا وملائمًا بشكل لا يصدق. في هذا البرنامج التعليمي من Raymond ، ستتعلم كيفية إنشاء نموذج تحميل ملف HTML5 قادر على تحميل ملفات متعددة في وقت واحد ، إنه مقتطف رائع من التعليمات البرمجية يمكن إعادة ضبطه وإعادة استخدامه بسرعة في إعدادات مختلفة.
كيفية إنشاء تطبيق iOS و Android في غضون 24 ساعة باستخدام HTML5 و Cordova
إن بناء تطبيق جوال هو حلم الكثيرين هذه الأيام. اجلس حول مقهى الرجل التكنولوجي الرقمي المحلي الخاص بك ، وستجد العشرات من المهووسين الذين يجلسون على أجهزة الكمبيوتر الخاصة بهم يخترقون عرضًا توضيحيًا وظيفيًا لتطبيقهم المحمول الأول. تعد تطبيقات الأجهزة المحمولة نشاطًا تجاريًا ضخمًا ، وفرص العمل موجودة في كل مكان ، حتى في شركات التكنولوجيا الكبيرة التي تحكم السوق. يعد الوصول إلى هذا المستوى تحديًا ، ولكن نادرًا ما يخرج أي شيء جيد من المواقف التي لا يتم فيها تقديم التحدي. يركز هذا البرنامج التعليمي الخاص ببناء تطبيق Android / iOS باستخدام Cordova على نهج سريع الخطى للحصول على معاينة تطبيق الهاتف المحمول جاهزة لأصدقائك ، حتى تتمكن من معرفة موقفك بأفكارك.
الغوص في HTML5
TDive Into HTML5 هو كتاب مجاني على الإنترنت يقدم لك HTML5 ويشرح بالتفصيل كيفية الانتقال من كونك مبتدئًا في HTML5 إلى أن تصبح محترفًا واثقًا يمكنه التعامل مع ما يخصه عندما يتعلق الأمر ببناء مواقع الويب وتطبيقات HTML5. الأدوات النفعية هي الموارد المباشرة للتعرف على الجوانب الفردية للغة برمجة معينة ، مع برنامج تعليمي لا يمكنك فقط استكشاف الجوانب الصغيرة لمفهوم معين ولكن تعلم كيفية تطبيق هذه الجوانب في أجزاء أخرى من مشاريعك أيضًا. حصل Dou على تغطية رائعة لتاريخ HTML5 ، والمفاهيم المهمة ، وكيفية استخدام الرسوم المتحركة ، ومقاطع الفيديو ، وكل شيء قد تواجهه عادةً عند قراءة برنامج تعليمي على أي حال.
الدليل الشامل للرسوم المتحركة CSS3 و HTML5
قبل بضع سنوات ، كان عليك استخدام Flash لإنشاء موقع ويب متحرك بالكامل ، وفي هذه الأيام يمكن إنجاز كل ذلك من خلال HTML5 و CSS3 - وكل يوم يدفع المصممون حدود هذه اللغات لتقديم تجارب أكثر إيجازًا تعيد تشكيل الطريقة التي نفهم بها الرسوم المتحركة على الويب. إن امتلاك موقع ويب ثابت أمر جيد ، ولكن وجود رسوم متحركة على موقع الويب الخاص بك يمكن أن يضيف بعض النقاط الإضافية فيما يتعلق بالمصداقية ، حتى تأثيرات الانتقال البسيطة يمكن اعتبارها رسومًا متحركة ، ومعرفة كيفية استخدام الانتقالات هي الخطوة الأولى في إنشاء التطبيقات ومواقع الويب التي تشعر بها سلس وواضح وسهل التنقل.
هذا المورد الضخم الذي أنت على وشك استكشافه مليء بالمعلومات الشيقة والواسعة حول الرسوم المتحركة على الويب ، ونوع المكتبات التي تحتاجها لجعلها تعمل ، وكيف تتفاعل بشكل عام مع المتصفح. أنت على بعد خطوات قليلة من أن تصبح العقل المدبر لتصميم الرسوم المتحركة.
كيفية التغلب على أهم 5 تحديات للتعليم الإلكتروني في HTML5
ما هي التحديات الشائعة التي تواجهها العلامات التجارية عند توفير التعليم الإلكتروني لفرقهم؟ يغطي Elucidat مجموعة لطيفة من النقاط المهمة التي ستختبرها عادة عند محاولة تعليم شيء ما لمجموعات كبيرة من الناس ، في هذه الحالة المحددة يكون الموضوع هو HTML5.
دورة مكثفة في تصميم الويب التفاعلي الفني
ستصبح البرامج التعليمية والأدلة سريعة الاستجابة للتصميم أكثر إيجازًا وعمقًا بينما نتحرك نحو ظاهرة عالمية. يجب أن تعرف خصوصيات وعموميات التصميم سريع الاستجابة. إنه المكان الذي سيتصفح فيه معظم مستخدمي الإنترنت من هواتفهم الذكية. سيكون جزء كبير من زوار موقع الويب الخاص بك هم الذين سيزورون من أجهزتهم المحمولة. الناس ليس لديهم الصبر للجلوس من خلال موقع وضع سطح المكتب. يحدث هذا بشكل خاص إذا لم يكن مالك موقع الويب عناء القيام بشيء حيال ذلك. تعلم من أحد أفضل الشركات في المجال كيف يمكنك إتقان تصميمات البكسل المثالية. لكي تصبح سلسًا وسريع الاستجابة ومرنًا على أي جهاز ، تحتاج إلى القيام بذلك.
كيفية تصميم التخطيطات الغنية بالبطاقات باستخدام واجهة المستخدم الدلالية
أصبحت تصاميم البطاقات مسموعة لأول مرة في كل مكان. من Google إلى Pinterest ، إلى تطبيقات الهاتف المحمول - بدأ الجميع في احتضان جمال تصميمات البطاقات المصممة بشكل كبير. تتدفق البرامج التعليمية أيضًا من جميع الجوانب لتحقيق أقصى استفادة من هذا الاتجاه الجديد الجميل. يوفر Semantic-UI أدوات ومكونات Bootstrap مشابهة لـ Bootstrap ، ولكن في المزيد من العلامات الدلالية. لديك ملخص رائع لاستخدام Semantic-UI لتحقيق تصميم بطاقة لا تشوبه شائبة لهذا البرنامج التعليمي. أنت بحاجة إلى تصميم لتكون جاهزًا للتنفيذ على أي موقع ويب تعمل عليه حاليًا. إعداد الكود النهائي متاح في JS Bin حيث يمكنك أن تتلاعب بالتصميم. ربما يمكنك إجراء تعديلات مخصصة على النحو الذي تراه مناسبًا لمشاريعك.
الاختبار ليس فقط للغات البرمجة الثقيلة. سيظل الاختبار دائمًا جزءًا لا يتجزأ من تصميم الويب. بدون اختبار ، فأنت تراهن ببساطة على قدراتك على تطوير موقع ويب لا تشوبه شائبة دون أي أخطاء. عادةً ، لن يكون الأمر كذلك أبدًا لأن الكثير يدخل في تصميم واحد. الطريقة الوحيدة للتأكد من أن هذا التصميم مستقر هي من خلال الاختبار.
توجد العديد من المكتبات هذه الأيام لإنهاء اختبار HTML5 و CSS3. ولكن ربما ، الشخص الذي أغفلته طوال هذا الوقت متصل مباشرة بمتصفح Chrome. يطلق عليه أدوات مطوري Chrome. إنها مجموعة من الأدوات لمطوري الواجهة الأمامية التي يمكنك استخدامها لاختبار وتحليل تصميماتك في الوقت الفعلي. هذا يذهب مباشرة في المتصفح. يمكنك اتباع طريقتين من شأنها أن تساعدك على تحسين طريقة عملك مع هذه الأدوات. في حالة بدء مشروع جديد ، اكتب كود HTML أولاً والعب بالقواعد. سيتم تمرير المسودة الأولى من HTML من خلال أدوات التطوير. ستلاحظ أن التطبيق الفوري لتغييراتك سيوفر لك الوقت أثناء تحسين مشروعك.
استخدام سمة HTML lang
تساعدك سمة اللغة في HTML5 على تحديد اللغة الافتراضية التي يستخدمها موقع الويب الخاص بك. تساعد هذه المواصفات بدورها الروبوتات والأدوات البعيدة على فهم كيفية الزحف إلى موقع الويب الخاص بك وفهرسته. لا تريد استخدام سمة اللغة الإسبانية على موقع ويب باللغة الإنجليزية فقط. الأمر نفسه ينطبق على الوضع بالعكس.
الإفصاح: تحتوي هذه الصفحة على روابط تابعة خارجية قد تؤدي إلى حصولنا على عمولة إذا اخترت شراء المنتج المذكور. الآراء الواردة في هذه الصفحة خاصة بنا ولا نحصل على مكافأة إضافية للمراجعات الإيجابية.