30 دروس وموارد HTML5 لمطوري الويب 2018
نشرت: 2018-07-30الويب هو عمل المهندس المعماري ، المصمم. الأساس في يد المصمم والمطور. يمكننا استخدام HTML لبناء مواقع الويب والبرامج والمشاريع والتطبيقات للعصر الرقمي. لكي يتمكن متصفح الويب من فهم موقع الويب وتفسيره ، يجب ترميزه وفقًا للمعايير ، وفي معظم الأحيان يكون هذا المعيار هو HTML ، مع إضافة CSS و JavaScript.
هناك بعض الفوائد المجزية لإتقان HTML5. من خلال الخبرة الكافية ، يمكنك أن تصبح مطورًا أماميًا مستقلاً وتكسب المال من تطوير مواقع الويب للآخرين ، ولكن الشيء الأساسي هو أن HTML5 يمنحك القدرة على إنشاء ما تريده على الويب. ربما مهما كان مصطلحًا واسعًا ، ولكن فيما يتعلق بتطوير وتصميم مواقع الويب ، فإن HTML5 هي أفضل فرصة لك لتحقيق النجاح. توجد أطر عمل رائعة هذه الأيام يمكن استكمالها بمعرفتك بـ HTML5 لبناء تجارب رقمية فريدة وديناميكية.
قام العديد من المطورين المخضرمين والخبراء بنشر كتب حول كيفية أن تصبح مطورًا للواجهة الأمامية - شخص يعرف CSS و HTML - وعلى الرغم من أن هذه الكتب رائعة ، إلا أنها يمكن أن تتأخر بسرعة عن أوقات ما يحدث في تطوير الويب في الوقت الحالي. ليست أي من اللغتين - HTML أو CSS - ثابتة ، ولكنها تتغير دائمًا ويتم تحسينها لتقديم أدوات وتقنيات أكثر دقة لإنشاء مواقع ويب حديثة. لذلك مع هذا النهج ، فإن البديل الجيد لتعلم HTML5 هو من خلال البرامج التعليمية على الويب والأدلة والإرشادات حول كيفية عمل ميزات معينة أو كيفية تحقيق تصميم معين. نحن نقدم لك أفضل وأحدث وأحدث البرامج التعليمية ، ولكن أيضًا الموارد ، حول كيفية أن تصبح محترفًا في HTML5 في غضون أسابيع.
تحسين تدفق المستخدم عبر انتقالات الصفحة
إذا كنت تخطط لدراسة HTML5 وتطوير الويب الأمامي بشكل عام ، فسيتعين عليك حتمًا التعرف على تجربة المستخدم ، وكل ما تقدمه إلى حد كبير. من الجيد أن تكون قادرًا على كتابة كود أنيق ، ولكن يكون الأمر أجمل عندما يعكس الكود الذي تكتبه فهمك لما يجب أن تشعر به تجربة المستخدم القوية لمواقع الويب والتطبيقات. يقضي عدد لا يحصى من الخبراء في هذه الأيام وقتهم في تحليل أداء الصفحة وأحدث الأفكار حول ما يجعل المستخدم يظل على الصفحة ، وما الذي يجعله يغادر الصفحة. توضح لنا إحدى أحدث دراسات الحالة البحثية أنه يمكن تحسين انتقالات الصفحة لتقديم تجربة مستخدم محسّنة.
تقليديًا ، نعتمد على الانتقال الافتراضي وهو عندما نضغط على صفحة جديدة من الموقع ، وعلينا الانتظار حتى يقوم المتصفح بإعادة تحميل تلك الصفحة. على الرغم من أن بعض السمات والمطورين يدركون مدى عدم كفاءة هذا المفهوم ، فإننا لن نرى هذا التغيير العالمي لكيفية عرض انتقالات الصفحة يتغير في أي وقت قريب ، ما لم يكن بالطبع ، سنجربه لأنفسنا وننتشر تدريجيًا كلمة عنها. ستجد في هذا البرنامج التعليمي الأدوات والمعلومات المطلوبة حول كيفية تضخيم انتقالات صفحتك حتى لا يضطر المتصفح إلى إعادة تحميل كل صفحة جديدة يفتحها زوارك ، مما يُعد إثراء مذهلاً لتجربة المستخدم العالمية التي توفرها تطبيقات سطح المكتب والجوال.
أنماط تصميم سريعة الاستجابة ، أو عندما لا يكون خارج القماش جيدًا بما فيه الكفاية
ما هو التصميم المستجيب الحقيقي والأصيل؟ هل هي مجموعة من الكتل والعناصر مخيطة مع بعض خصائص التصميم سريعة الاستجابة المرفقة بها؟ هناك الكثير من التصميم السيئ الذي يتم تداوله هذه الأيام ، وبينما يبدو غير تقليدي من الخارج ، إذا ألقينا نظرة أعمق على قاعدة الشفرة من الداخل ، فإن العديد من مواقع الويب الرائدة التي نراها اليوم تتجنب تمامًا أي إعداد هيكلي للطريقة التي يتم تقديم تصميم الصفحة ، مما يعني مشكلة بالنسبة لأولئك الذين يتعين عليهم القدوم وإصلاح هذا الرمز بعد ذلك.
هذه المقالة أقل تقنية وأكثر ثراءً في الأمثلة على كيفية إفساد مواقع الويب المختلفة لأنماط التصميم المتجاوبة وتوفر تقنيًا تجربة أسوأ حالًا بهذه الطريقة. بصفتك مطور HTML5 ، سترغب في معرفة أنماط التصميم التي يجب تجنبها ، وطرق الاستخدام من أجل هيكلة مشاريعك بشكل أفضل للحفاظ على المرونة.
تصميم النموذج: كيفية تنسيق مدخلات المستخدم تلقائيًا
سيحقق لك تصميم نماذج جيدة بعض نقاط السمعة من زملائك المطورين ، ولكن ليس منهم فقط. مع هذا النمو الهائل في إمكانات المتصفح ، يعتاد المستخدمون ببطء على أشياء مثل إكمال النماذج الآلية. فكر في إجراء أي عمليات شراء عبر الإنترنت ، إذا كنت مستخدمًا متعطشًا لـ Google Chrome ، فستعرف أن Chrome يمكنه حفظ تفاصيل بطاقة الائتمان الخاصة بك في وقت لاحق ، لتسهيل الوصول إليها.
يُحدث هذا النوع من تصميم النموذج فرقًا في كيفية عرض المستخدمين للمتصفح الذي يستخدمونه ، ولكن أيضًا في مدى انفتاح مالك موقع الويب على جهود الإكمال التلقائي هذه ؛ من الممكن حظرهم ، لكنهم متاحون في الغالب. يركز هذا البرنامج التعليمي من Thoriq على وظيفة نماذج الإكمال التلقائي عندما يكتب المستخدم شيئًا ما في الوقت الفعلي. قد يكون هذا رقمًا تسلسليًا أو تاريخ ميلاد أو سلسلة من الأحرف التي تطلبها. إن وجود وظيفة الإكمال التلقائي والفرز التلقائي يمكن أن يترك انطباعًا دائمًا للمستخدمين الذين يزورون لأول مرة. في بعض الأحيان يمكن أن يكون مفيدًا لقاعدة بيانات مشروعك ، حيث تتجنب إدخال المستخدمين لبيانات سخيفة وبدلاً من ذلك تقوم بتصحيحها تلقائيًا أثناء كتابتها.
كيفية إنشاء تخطيط موقع إخباري باستخدام Flexbox
Flexbox هو الآن الملك الرسمي للتخطيطات في تصميم الويب. يمكن أن تساعدك هذه الخاصية الصغيرة الرائعة في تصميم صفحة تتميز بوضوح بكسل وأبعاد لا تشوبها شائبة ، من أي جهاز يتم الوصول إلى موقع الويب المعين منه. هناك طريقة جيدة لاستكشاف إمكانيات Flexbox وهي من خلال البرامج التعليمية ، وغالبًا ما تكون موجزة وتقدم العديد من الأمثلة حول كيفية تعديل شبكات وصفوف التصميم المختلفة للحصول على عرض مثالي على الصفحة. وضع جيريمي توماس العمل لإنتاج هذا البرنامج التعليمي التالي لبناء مخطط لموقع إخباري أو مجلة إخبارية باستخدام خصائص تخطيط 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 باستخدام كوردوفا على نهج سريع الخطى للحصول على معاينة تطبيق الهاتف المحمول جاهزة لأصدقائك ، حتى تتمكن من معرفة موقفك بأفكارك.
كيفية تكوين خادم الويب الخاص بك لفيديو HTML5
بدأت جميع الأسماء الكبيرة في صناعة محتوى الفيديو في التحول إلى فيديو HTML5 للحصول على أداء أفضل للمتصفح ، حيث أن YouTube هو منصة الفيديو المهيمنة التي تحولت من Flash إلى HTML5 قبل بضع سنوات ، وحتى يومنا هذا يواصلون تحسين من أجل توفير تجربة مشاهدة فيديو أفضل. يشرح Kristof نصيحة سريعة وسهلة للغاية حول كيفية تكوين خادم الويب الخاص بك بحيث يدعم أنواع ملفات HTML5 ، وإلا فقد تحاول تحميل محتوى فيديو HTML5 ولن يظهر على الإطلاق.
إشارات مرجعية في HTML5
توفر لك إشارات HTML5 المرجعية الاضطرار إلى زيارة مدونات تطوير الويب باستمرار للتعرف على أحدث الأدوات والمكتبات والمكونات الإضافية التي أصبحت متاحة للسوق المجاني. بصرف النظر عن إدراج رابط يومي لأحدث أداة رائعة ، تحتوي HTML5 Bookmarks أيضًا على عنصر واجهة مستخدم للشريط الجانبي يسرد الأطر والمحركات والموارد والروابط المهمة لكل ما يتعلق بـ HTML5. في بعض الأيام ، يوجد أكثر من رابط واحد ، وعادة ما يكون هناك رابط واحد على الأقل. من خلال موقع الإشارات المرجعية هذا ، يمكنك التعرف على نوع الأدوات التي أصبحت متاحة ، ويمكنك حتى إرسال الأداة الخاصة بك وإدراجها إذا كنت تعمل على شيء معين لفترة طويلة.
الغوص في HTML5
البرامج التعليمية هي الموارد المباشرة للتعرف على الجوانب الفردية للغة برمجة معينة ، مع برنامج تعليمي لا يمكنك فقط استكشاف الجوانب الصغيرة لمفهوم معين ولكن تعلم كيفية تطبيق هذه الجوانب في أجزاء أخرى من مشاريعك أيضًا. Dive Into HTML5 هو كتاب مجاني عبر الإنترنت يقدم لك HTML5 ويشرح بالتفصيل كيفية الانتقال من كونك مبتدئًا في HTML5 إلى أن تصبح محترفًا واثقًا يمكنه التعامل مع ما يخصه عندما يتعلق الأمر ببناء مواقع الويب وتطبيقات HTML5. يمكنك الحصول على تغطية رائعة لتاريخ HTML5 ، والمفاهيم المهمة ، وكيفية استخدام الرسوم المتحركة ، ومقاطع الفيديو ، وبشكل عام كل شيء قد تواجهه عادةً عند قراءة برنامج تعليمي على أي حال.
مطوري ألعاب HTML5
ما الذي يمكنك إنشاؤه أيضًا باستخدام HTML5 باستثناء مواقع الويب والتطبيقات؟ ماذا عن ألعاب الجوال؟ لقد انفجر سوق ألعاب الهاتف المحمول وأصبح مسؤولاً بمفرده عن نجاح العديد من أسواق متاجر التطبيقات لدينا اليوم. يبدأ تعلم كيفية إنشاء لعبة HTML5 الخاصة بك من خلال فهم كيفية تفاعل HTML5 مع المتصفح ، وعند هذه النقطة يمكنك البدء في استكشاف محركات ألعاب HTML5 المختلفة لبدء بناء مجال لعبتك الأولى. إذا كان هذا المشروع يثير اهتمامك ، فلا تخجل من زيارة منتدى HTML5 Game Devs حيث يمكنك التعلم والتواصل وتبادل الأفكار مع مطوري الألعاب الآخرين ، وجميعهم يستخدمون HTML5 لإكمال مشاريعهم. إنه مكان رائع للتعرف على آخر الأخبار في الصناعة ، ولكن أيضًا للتعرف على طرق استخدام الأشخاص للبرامج لبناء الألعاب.
الدليل الشامل للرسوم المتحركة CSS3 و HTML5
قبل بضع سنوات ، كان عليك استخدام Flash لإنشاء موقع ويب متحرك بالكامل ، وفي هذه الأيام يمكن إنجاز كل ذلك من خلال HTML5 و CSS3 - وكل يوم يدفع المصممون حدود هذه اللغات لتقديم تجارب أكثر إيجازًا تعيد تشكيل الطريقة التي نفهم بها الرسوم المتحركة على الويب. إن امتلاك موقع ويب ثابت أمر جيد ، ولكن وجود رسوم متحركة على موقع الويب الخاص بك يمكن أن يضيف بضع نقاط إضافية فيما يتعلق بالمصداقية ، حتى تأثيرات الانتقال البسيطة يمكن اعتبارها رسومًا متحركة ، ومعرفة كيفية استخدام الانتقالات هي الخطوة الأولى في إنشاء التطبيقات والمواقع الإلكترونية التي تشعر بها سلس وواضح وسهل التنقل.
هذا المورد الضخم الذي أنت على وشك استكشافه مليء بالمعلومات الشيقة والحيلة حول الرسوم المتحركة على الويب ، ونوع المكتبات التي تحتاجها لجعلها تعمل ، وكيف تتفاعل بشكل عام مع المستعرض. أنت على بعد خطوات قليلة من أن تصبح العقل المدبر لتصميم الرسوم المتحركة.
5 أخطاء فظيعة تقوم بها باستخدام HTML5
الممارسة تجعلها مثالية ، إنها تفعل ذلك حقًا. عندما تتعهد بعادة أو مهارة جديدة - فأنت ملزم بالمرور بتجارب تعمل على تحسين فهمك لتلك المهمة المعينة ، وأحيانًا تتعلم الأشياء التي يجب تجنبها ، وأحيانًا تدرك كيفية إنجاز الأمور بشكل أسرع وأفضل. إنها كلها لعبة وقت ، ومن المؤكد أن البرمجة تندرج ضمن فئة التعلم هذه.
يمكن أن توفر HTML5 تحديات ، مثل أي لغة أخرى ، ويمكن أن تخلط بين المطورين الجدد وأفضل الطرق للتعامل مع أشياء التصميم ، ولا يتم شرح هذه الأشياء في كثير من الأحيان في برنامج تعليمي ، في كثير من الأحيان يستخدم الجميع نهجهم الخاص لبناء الأشياء - واحدة من العديد الأسباب التي تجعل الناس يكرهون (أو ربما لا يزالون يفعلون) PHP كثيرًا ، بسبب مدى تنوعها ومدى عيوب الكود المكتوب كما تم إنشاؤه بواسطة العديد من المطورين المختلفين. هنا لديك ملخص جيد لأخطاء بناء الجملة وبرمجة HTML5 الشائعة التي يجب أن ترتكبها عدة مرات على الأقل خلال مسيرتك المهنية في مطور الويب ، لذا استكشفها وفهمها واتخذ الخطوات اللازمة لمنعها من الحدوث في المستقبل .
كيف تتغلب على أهم 5 تحديات للتعليم الإلكتروني في HTML5
ما هي التحديات الشائعة التي تواجهها العلامات التجارية عندما توفر التعليم الإلكتروني لفرقها؟ يغطي Elucidat مجموعة لطيفة من النقاط المهمة التي ستختبرها عادة عند محاولة تعليم شيء ما لمجموعات كبيرة من الناس ، في هذه الحالة المحددة يكون الموضوع هو HTML5.
إنشاء ومشاركة محتوى وتطبيقات HTML5 غنية
يوفر H5P للمطورين الأدوات اللازمة لإنشاء محتوى HTML5 ثري وقابل لإعادة الاستخدام في سياقات تطوير أي تطبيق. يمكنك استخدام المكون الإضافي H5P لإضافة وظيفة المحتوى الغنية القابلة لإعادة الاستخدام إلى مواقع ويب Drupal أو WordPress الخاصة بك.
يوفر H5P العديد من طبقات أنواع المحتوى التي ستثري مظهر موقع الويب الخاص بك عشرة أضعاف. بعضها عبارة عن أكورديون لإنشاء قوائم العناصر التي يمكن توسيعها أو تصادمها. يحتوي على أداة دردشة فيديو حتى تتمكن من التفاعل مع زوارك من خلال وسيط مفيد حقًا. كما أن لديها أداة حسابية لإنشاء نطاقات مختلفة من الاختبارات. علاوة على ذلك ، يحتوي على منشئ المخططات حتى تتمكن من عرض أحدث بيانات البحث التي حصلت عليها بسرعة. كما أن لديها أداة رائعة لبناء الملصقات من الصور. أخيرًا ، يحتوي على عنصر واجهة مستخدم مذهل لتقديم دوراتك مباشرة على موقع الويب الخاص بك والعديد من الأدوات الذكية الرائعة.
سوف يستغرق الأمر بعض الوقت للتعرف عليها جميعًا. ولكن ، يمكن لهذه الأدوات أن تغير تمامًا شكل موقع الويب الخاص بك وتجذب بالتأكيد الجماهير التي تقدر الميزات التفاعلية. تم تصميم H5P حول الكتل الإنشائية القابلة لإعادة الاستخدام والتي تسمى مكتبات H5P. على سبيل المثال ، توجد مكتبات H5P لإضافة الفيديو والصور والصوت إلى المحتوى الخاص بك ولإنشاء عناصر واجهة المستخدم. تم أيضًا تصميم جميع أنواع محتويات H5P الحالية بحيث يمكن إعادة استخدامها. إذا كنت بحاجة إلى أنواع أسئلة في نوع المحتوى الخاص بك ، فلن يستغرق الأمر سوى بضع دقائق لتوصيل واحد. يمكنك الاختيار من بين 10 أنواع من الأسئلة الموجودة وستتبع جميعها نفس نوع العقد من الأسئلة.
سير عمل التصميم المثالي
HTML5 ترميز ، أليس كذلك؟ أكثر من مجرد ترميز ، إنها أيضًا أداة لتصميم موقع على شبكة الإنترنت. يمكن لـ CSS3 إضافة تلك الطبقات الرائعة من الأسلوب واللون ، لكن HTML5 يجمع كل تلك الخصائص الصغيرة الأنيقة معًا. إنه ما يساعد على إنهاء تنفيذ فكرتك الإبداعية لتطبيق أو موقع ويب أو لعبة محمولة. سير عمل التصميم المثالي هو دليل صغير لطيف يوضح لك كيف يمكنك القيام بالمزيد ، دون إنفاق الكثير.
إنه عرض تقديمي ، ملخص للأنواع ، يعرض أفضل الأدوات التي يمكن استخدامها عند تصميم مشروع جديد ، والأدوات التي ستؤدي في النهاية إلى توفير إنتاجيتك. قد تبدو الدعابة ساخرة قليلاً ، لكنها ممتعة في النهاية. ألق نظرة سريعة واطلع على إحدى النصائح التي تلتزم بسير عملك الحالي ، وربما يمكنك إعادة تشكيلها للتأكد من أنك تنجز المزيد مع العمل بشكل أقل.
دورة مكثفة في تصميم الويب السريع الاستجابة التقنية
ستصبح البرامج التعليمية والأدلة المستجيبة للتصميم أكثر إيجازًا وتعمقًا بينما نتحرك نحو ظاهرة عالمية. إنه المكان الذي سيتصفح فيه معظم مستخدمي الإنترنت من هواتفهم الذكية. من الضروري أن تعرف خصوصيات وعموميات التصميم سريع الاستجابة. سيكون جزء كبير من زوار موقع الويب الخاص بك الذين سيزورون من أجهزتهم المحمولة. الناس ببساطة لا يملكون الصبر للجلوس من خلال موقع وضع سطح المكتب. يحدث هذا بشكل خاص إذا لم يكن مالك موقع الويب عناء القيام بشيء حيال ذلك. تعلم من أحد أفضل الشركات في المجال كيف يمكنك إتقان تصميمات البكسل المثالية. تحتاج إلى القيام بذلك حتى تصبح سلسة وسريعة الاستجابة ومرنة في أي جهاز.
كيفية تصميم تخطيطات غنية بالبطاقات باستخدام واجهة مستخدم دلالية
أصبحت تصاميم البطاقات مسموعة لأول مرة في كل مكان. من Google إلى Pinterest ، إلى تطبيقات الهاتف المحمول - بدأ الجميع في احتضان جمال تصميمات البطاقات المصممة بشكل كبير. تتدفق البرامج التعليمية أيضًا من جميع الجوانب حول كيفية تحقيق أقصى استفادة من هذا الاتجاه الجديد الرائع. يوفر Semantic-UI مجموعة مماثلة من الأدوات والمكونات التي يوفرها Bootstrap ، ولكن بالطبع في ترميز أكثر دلالة. في هذا البرنامج التعليمي ، لديك ملخص جيد لكيفية استخدام واجهة المستخدم الدلالية لتحقيق تصميم بطاقة لا تشوبه شائبة. تحتاج إلى تصميم لتكون جاهزًا للتنفيذ على أي موقع ويب تعمل عليه حاليًا. إعداد الكود النهائي متاح في JS Bin حيث يمكنك أن تتلاعب بالتصميم. ربما يمكنك إجراء تعديلات مخصصة على النحو الذي تراه مناسبًا لمشاريعك.
كيفية استخدام أدوات مطور Chrome لاختبار التخطيطات
الاختبار ليس فقط للغات البرمجة الثقيلة. في الواقع ، سيظل الاختبار دائمًا جزءًا لا يتجزأ من تصميم الويب. بدون اختبار ، فأنت تراهن ببساطة على قدراتك الخاصة على تطوير موقع ويب لا تشوبه شائبة دون أي أخطاء. عادةً ، لن يكون الأمر كذلك أبدًا لأن هناك الكثير مما يدخل في تصميم واحد. الطريقة الوحيدة لضمان استقرار هذا التصميم هي من خلال الاختبار.
توجد العديد من المكتبات هذه الأيام لإنهاء اختبار HTML5 و CSS3. ولكن ربما ، الشخص الذي أغفلته طوال هذا الوقت متصل مباشرة بمتصفح Chrome. يطلق عليه أدوات مطوري Chrome. إنها مجموعة من الأدوات لمطوري الواجهة الأمامية التي يمكنك استخدامها لاختبار وتحليل تصميماتك في الوقت الفعلي. هذا يذهب مباشرة في المتصفح. هناك طريقتان يمكنك اتباعهما لمساعدتك على تحسين طريقة عملك مع هذه الأدوات. إذا كنت تبدأ مشروعًا جديدًا ، فقم بتشفير HTML أولاً ثم العب بالقواعد. سيتم تمرير المسودة الأولى من HTML من خلال أدوات التطوير. ستلاحظ أن التطبيق الفوري لتغييراتك سيوفر لك الوقت أثناء تحسين مشروعك.
استخدام سمة HTML lang
تساعدك سمة اللغة في HTML5 على تحديد نوع اللغة الافتراضية التي يستخدمها موقع الويب الخاص بك. تساعد هذه المواصفات بدورها الروبوتات والأدوات البعيدة على فهم كيفية الزحف إلى موقع الويب الخاص بك وفهرسته. لا تريد استخدام سمة اللغة الإسبانية على موقع ويب باللغة الإنجليزية فقط. الأمر نفسه ينطبق على الوضع بالعكس.
HTML5 UP
قد تظهر مشكلة عند إنشاء موقع ويب جديد من البداية بناءً على كتاب أو برنامج تعليمي. قد يحدث هذا عادةً لأنك تتبع إرشادات القواعد التي تمت كتابتها منذ شهور. قد يستغرق هذا سنوات قبل أن تشتري الكتاب. في هذه الحالات (ليست نادرة جدًا) ، ستقوم بإنشاء مواقع ويب بتقنيات وأساليب قديمة. نريد أن نقدم لك نهجًا مختلفًا لتسريع تعلمك. يمكنك حتى الاحتفاظ بكتبك ، لأن المعلومات التقنية لا تقدر بثمن بغض النظر.
HTML5 UP! عبارة عن مجموعة قوالب مواقع ويب سريعة الاستجابة. لقد غطينا موضوعاتهم في بعض المناسبات ، ونحن سعداء للغاية بتصميمها وهيكلها العام الذي لا تشوبه شائبة. توصيتنا إذن هي استخدام هذه السمات الجميلة كأدوات تعليمية. يجب عليك أيضًا تنزيل الكود المصدري الخاص بهم واستكشافه على أكمل وجه. اسحب محرر الشفرة من جانب والمستعرض في الجانب الآخر. سترى كيف تم دمج كل عنصر في التصميم. يمكنك تعلم هذه التقنيات بنفسك وتطبيقها على تصميماتك الخاصة في المستقبل. يبدو من السهل إلى حد ما أليس كذلك؟ حسنًا ، إنه كذلك بالفعل ، ويمكنك القيام بذلك لأي نوع من مواقع الويب ذات السمات المجانية الموجودة هناك. إنها طريقة سريعة للتعرف على مفاهيم التصميم الجديدة وكيفية استخدامها في سير العمل الخاص بك.
أيوني: إطار عمل متقدم لتطبيق HTML5 Hybrid Mobile
Ionic هي من بين أطر HTML5 الأكثر تقدمًا والأكثر تطورًا في السوق. ليس هناك الكثير مما لا تستطيع Ionic فعله ، ولكن هناك الكثير مما يمكنها فعله بالفعل. تفخر العلامات التجارية الرائدة وشركات التكنولوجيا بالاعتراف بأنهم مستخدمون أيضًا للإطار الأيوني. يستخدمونها لتطبيقات الجوال وسطح المكتب. تحتضن Ionic أداء الويب ومن المعروف أنها واحدة من أسرع الأطر الهجينة الموجودة. كما أنها تحتضن تقنية Angular. أنت دائمًا تقوم بالبناء والنمذجة باستخدام ميزات تطوير الويب الأكثر تقدمًا الموجودة هناك. إن التصميم المذهل والشعور المعين بسهولة الاستخدام هو ما يجعل المنافسة الأيونية تحطيم البالوعة.
صانع الرسوم المتحركة على الإنترنت HTML5 مجانًا
نوصيك بمجموعة مختارة من دروس الرسوم المتحركة بتنسيق HTML5. نحن نفهم تمامًا ما إذا كنت لا تتطلع إلى متابعتها. في بعض الأحيان ، قد تكون الرسوم المتحركة صعبة بعض الشيء لإتقانها. لهذه المواقف ، لا يمكننا أن نوصي بما يكفي من برنامج الرسوم المتحركة الشهير. إنها أداة موثوقة عبر الإنترنت لإنشاء مقاطع فيديو ورسوم متحركة تعتمد جميعها على تقنية HTML5. إنه مثالي للعلامات التجارية التي ترغب في إنشاء مقاطع فيديو إعلانية جديدة. أيضًا ، إنه مثالي للمدرسين الذين يحتاجون إلى إنشاء فيديو تقديمي لدورتهم التدريبية. علاوة على ذلك ، فهو مثالي للمطورين الذين يرغبون في استخدام بعض سحر الرسوم المتحركة HTML5 على مواقع الويب الخاصة بهم.
تدفق بانر
عالم الإعلان يتغير كل يوم. تمنع برامج Adblockers مشرفي المواقع من جني أرباحهم المكتسبة بصعوبة. مع هذا ، تحاول شركات مختلفة أن تنبت لتفعل شيئًا حيال ذلك. يوفر BannerFlow بيئة رائعة لإنشاء لافتات HTML5 التي ستكون مقبولة بصريًا. قام المطورون بالتأكيد ببنائه بتقنية ويب دقيقة بحيث يكونون مناسبين لجميع المتصفحات الحديثة. قم بإنشاء لافتات مخصصة وإذا كنت ترغب في ذلك يمكنك حتى مراقبة أدائها الفردي.