ابدأ مع HTML5

هذا الدليل متاح للتنزيل كملف PDF مجاني. تنزيل ابدأ باستخدام HTML5 الآن. لا تتردد في نسخ ومشاركة هذا مع أصدقائك وعائلتك.

instagram viewer

و

العلامات ليست شاقة للغاية ، ولا تخشى أن تتسخ يديك في بعض التعليمات البرمجية المصدر.

ثانيًا ، يفترض هذا الدليل أنك تعرف ما هو CSS وكيف يعمل. لا نتوقع منك أن تكون عبقريًا في التصميم ، ولا يُتوقع منك معرفة مواصفات CSS بالكامل من الخلف. ومع ذلك ، يجب أن تكون قادرًا على تطبيق النمط على عنصر على صفحة الويب ، وأن تكون قادرًا على الارتباط بملف CSS ومعرفة الفرق بين المعرف والفصل وكيفية تطبيق النمط على كل عنصر.

إذا كنت تحك رأسك في الأعلى ، فلا تقلق. أحد أفضل الأشياء في HTML و CSS هو أنه سهل حقًا. في الواقع ، MakeUseOf لديه دليل XHTML لا يصدق تعلم التحدث "الإنترنت": دليلك إلى xHTMLمرحبًا بك في عالم XHTML - لغة ترميز النص التشعبي القابلة للتوسيع - لغة ترميز تسمح لأي شخص بإنشاء صفحات ويب مع العديد من الوظائف المختلفة. إنها اللغة الأساسية للإنترنت. اقرأ أكثر التي ستجعلك تسرع بسرعة كبيرة.

بعد قراءة هذا الدليل ، قد ترغب أيضًا في إلقاء نظرة على المقالات التالية:

• 8 مواقع مع أمثلة على جودة الترميز 8 أفضل مواقع الويب لجودة أمثلة على كود HTMLهناك بعض المواقع الرائعة التي تقدم أمثلة ودروس تعليمية مفيدة ومصممة بشكل جيد. هنا ثمانية من المفضلة لدينا. اقرأ أكثر
• 6 مدونات لمتابعة مصممي الويب العظيم أفضل 6 مدونات تصميم ويب للمتابعة اقرأ أكثر

ستحتاج أيضًا إلى محرر نصوص حديث ومتصفح. أي إصدار من Internet Explorer أقدم من IE 9 وبعض الإصدارات القديمة من Safari و Chrome و سيعاني فايرفوكس مع العديد من الميزات التي تعد جزءًا من HTML5 وقد تمنعك من متابعة ذلك يرشد.

ونتيجة لذلك ، نشجعك على تنزيل متصفح حديث. أوصي بـ Google Chrome ، وسأستخدمه في كل مثال.

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

1.2 محررات النصوص لتطوير الويب

محرر النصوص هو ما ستستخدمه لكتابة رمزك. قد تتساءل ما هو محرر النصوص.

حسنًا ، أولاً ليس معالج كلمات. برامج مثل Microsoft Word و Apple Pages غير مناسبة تمامًا لتطوير الويب. وذلك لأنها ترفق معلومات إضافية لملفات HTML و CSS و Javascript التي تجعل من الصعب على متصفح الويب الخاص بك قراءتها.

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

جهاز الكمبيوتر الخاص بك يأتي بالفعل مع واحد. إذا كنت تستخدم جهاز كمبيوتر يعمل بنظام Windows ، فإن Notepad هو محرر النصوص الذي من المحتمل أنك قمت بتثبيته.

على جهاز Mac ، يختلف الوضع قليلاً. يأتي OS X مزودًا بأربعة محررات نصية مختلفة. هذه تسمى Vim و Emacs و Pico و Nano. ومع ذلك ، على عكس المفكرة ، كلهم ​​يعملون في المحطة.

هذا أمر مخيف قليلاً للأشخاص الجدد في تطوير الويب ويجب ألا يستخدمه الأشخاص الجدد في تطوير البرامج. لن نستخدمها في هذا الدليل. ومع ذلك ، عندما تصبح أكثر ثقة قليلاً بالبرامج وتطوير الويب ، فمن الجدير بالتأكيد إلقاء نظرة عليها فيم أهم 7 أسباب لإعطاء محرر نص Vim فرصةلسنوات ، جربت محرر نص واحد تلو الآخر. سمها ، حاولت ذلك. لقد استخدمت كل واحد من هؤلاء المحررين لأكثر من شهرين كمحرر يومي الأساسي. بطريقة ما ، أنا ... اقرأ أكثر و Emacs. كلاهما محررات نصية قوية ، وعندما يتقن يمكن أن يوفر لك الكثير من الوقت.

في Linux ، يختلف محرر النص الافتراضي بين التوزيعات. على أوبونتو ، من المحتمل جيديت gedit: أحد أكثر محرري النصوص العادية المليئة بالميزات [Linux و Windows]عندما تفكر في محررات نص عادي ، فإن أول شيء قد يدخل إلى عقلك هو تطبيق المفكرة في Windows. يفعل بالضبط ما ينص عليه وصف وظيفته - ميزات بسيطة لنص عادي ... اقرأ أكثر ، وهو محرر نصوص لطيف لا يختلف كثيرًا عن المفكرة.

ومع ذلك ، سنقوم في هذه الدورة بكتابة التعليمات البرمجية الخاصة بنا باستخدام ثلاث أدوات مختلفة.

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

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

والثاني هو موقع ويب يسمى Codepen.io. سيسمح لك هذا الموقع الرائع بتشفير HTML و CSS و Javascript في المتصفح وهو مجاني للاستخدام. سيسمح لك أيضًا بمشاهدة التغييرات على الفور.

2. الترميز الدلالي

ستتعرف في هذا الفصل على الترميز الدلالي وكيفية تنظيم التعليمات البرمجية الخاصة بك بناءً على محتواها.

حتى وقت قريب ، تم تنظيم كود HTML بشكل عام مع

نجح ذلك ، ولكن كان هناك مجال للتحسين. المشكلة مع

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

لذا ، كيف يعملون؟ خذ بعين الاعتبار الرمز التالي.

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

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

عندما تفكر في الأمر ، يتبع الكثير من مواقع الويب هذه الاتفاقيات. تحتوي معظم مواقع الويب على جزء محجوز للتنقل. عادة ما يكون لديهم مجموعة من المحتوى. هم على الأرجح لديهم رأس.

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

لذا ، أتذكر الرمز الذي كان لدينا من قبل؟ دعونا نلقي نظرة عليه مع إضافة بعض الترميز الدلالية.

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

لذا ، دعنا نلقي نظرة على بعض علامات الترميز الدلالية.

2.1 القسم

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

2.2 المادة

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

2.3 جانبا

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

2.4 الرأس

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

2.5 التنقل

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

2.6 تذييل

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

2.7 اختبر نفسك

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

3. نماذج

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

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

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

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

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

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

3.1 تحسين نموذج

لذا ، لنلق نظرة على نموذج ونرى كيف يمكننا تحسينه.

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

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

3.2 أنواع وأنماط الإدخال

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

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

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

سوف نتأكد من أن حقل "اللون المفضل" الخاص بنا مطلوب. في قوس الزاوية الأخير (>) في علامة إدخال البريد الإلكتروني ، ما عليك سوى كتابة "مطلوب". هذا هو. الآن ، عندما تحاول إرسال نموذجك بدون قيمة ، فسوف ينتج عنه رسالة خطأ.

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

كانت هذه مقدمة موجزة بشكل لا يصدق لقوة النماذج في HTML5. إذا كنت ترغب في قراءة المزيد ، أوصيك بزيارة هذه الروابط.

قراءة متعمقة:

• حيل CSS - دعنا نكتب الترميز الدلالي
• طبيب HTML5 - لنتحدث عن علم الدلالة

3.3 اختبر نفسك

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

• اسم
• عنوان بريد الكتروني
• رقم الهاتف
• الحساسية

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

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

4. وسائل الإعلام

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

لم يكن هذا مثاليًا. أولاً ، لم يعمل أي من هذه الأطر بشكل جيد على الأجهزة المحمولة. لم يكونوا مجهزين للعالم الحديث من الهواتف الذكية والأجهزة اللوحية.

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

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

4.1 كيف يجعل HTML5 الفيديو والصوت مذهلين

غيّر HTML5 هذا من خلال السماح لمطوري الويب بتضمين الفيديو والصوت في صفحات الويب الخاصة بهم باستخدام بضعة أسطر من التعليمات البرمجية. يعمل على علاج الأجهزة المحمولة ويعمل على كل متصفح ويب حديث.

ونتيجة لذلك ، تستفيد الشركات الكبرى مثل YouTube و Vimeo و Netflix من ثورة HTML5. لماذا لا تنضم إليهم؟

4.2 كل شيء عن برامج الترميز

في هذا الفصل ، ستتعلم كيفية استخدام إمكانات HTML5 لتضمين الصوت والفيديو في صفحات الويب الخاصة بك.

أولاً ، يجب أن أبدأ مع تحذير. بينما يمكنك استخدام فيديو HTML5 في كل متصفح ويب حديث ، إلا أنه لا يعمل بنفس الطريقة عبر كل متصفح ويب. تختلف برامج الترميز التي يستخدمها كل متصفح. في Internet Explorer ، أنت مقيد باستخدام فيديو MP4. يعد Chrome أكثر سخاءً قليلاً ويسمح لك باستخدام فيديو WebM و MP4 و Ogg Theora. يعد Opera أكثر تقييدًا ويسمح لك فقط باستخدام فيديو Theora و WebM.

نتيجة لذلك ، يجب أن تكون ذكيًا قليلاً في كيفية إدراج الفيديو في صفحة الويب الخاصة بك. لذا ، دعنا نرى كيف يعمل.

4.3 البدء بالفيديو

بادئ ذي بدء ، ستحتاج إلى إنشاء بعض الافتتاح والختام

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

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

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

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

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

4.4 إضافة الصوت

يمكن إدراج الصوت في صفحة الويب الخاصة بك بطريقة تذكرنا بكيفية إدراج الفيديو في صفحتنا.

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

ثم ، قم بتضمين علامة مصدر لملف MP3 الذي ترغب في الارتباط به. لا داعي للقلق كثيرًا عندما يتعلق الأمر بتوافق برنامج الترميز. تتمتع معظم متصفحات الويب الحديثة بالقدرة على تشغيل صوت MP3 ، على الرغم من أنه من الممارسات الجيدة تضمين ".ogg" وملف ".wav" - في حالة الضرورة.

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

تبدو النتيجة النهائية قليلا مثل هذا.

عندما تفتح هذا في متصفح الويب الخاص بك ، يجب أن يبدو قليلاً مثل هذا.

4.5 اختبر نفسك

• ما هو الغرض من وجود ملصق في علامات الفيديو الخاصة بك؟
• ما هي برامج الترميز التي لا يمكنك استخدامها في Internet Explorer؟
• إذا أردت القدرة على إيقاف بعض الصوت مؤقتًا ، فما السمة التي ستضيفها إلى علامة "الصوت"؟

قراءة متعمقة:

• فيديو HTML5 Rocks

5. CSS3 التحولات والرسوم المتحركة

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

قام الناس ببعض الأشياء المدهشة مع CSS3 ، من إنشاء ساعة رقمية إلى كتابة لعبة Pong كاملة. حتى أن شخصًا ما استخدمها لإعادة إنشاء الاعتمادات التمهيدية لـ Mad Men. إنها تقنية قوية حقًا وعندما يتم إتقانها يمكن استخدامها لإضافة مستوى مذهل من الوظائف إلى صفحة الويب الخاصة بك.

في هذا الفصل ، سأقدم لكم موجزًا مقدمة عن CSS3 أفضل 5 مواقع لتعلم CSS عبر الإنترنت اقرأ أكثر ، وتظهر لك كيفية إضافة بعض التأثيرات المذهلة إلى صفحتك.

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

سنبدأ بسيطًا وننشئ تحويلًا بسيطًا للصور يدور الصورة 3 درجات عند التمرير. بادئ ذي بدء ، قم بإنشاء علامة div ومنحها معرفًا. في المثال أدناه ، أعطيته معرف "muo".

5.1 تأثيرات تحريك CSS

في هذا القسم ، قم بتضمين صورة من اختيارك. لقد ضمنت نسخة من شعار MakeUseOf.

ستحتاج بعد ذلك إلى كتابة بعض قواعد ورقة الأنماط. في المثال أدناه ، أنشأت هامشًا علويًا ويسارًا لإعطاء الصورة بعض المساحة. لقد ضمّنت أيضًا قاعدة ورقة أنماط غريبة المظهر تبدأ بـ "#muo: hover". ما هذا؟

عند إرفاق ": hover" بقاعدة ورقة أنماط ، سواء أكان ذلك لعنصر أو معرف أو فئة ، فأنت بذلك تطلب من المتصفح تطبيق هذا النمط عندما يتحكم الماوس في العنصر. رائع ، أليس كذلك؟

داخل قاعدة "#muo: hover" ، لدينا سطر يقول "-webkit-convert: rotate (3deg)". كما أنا متأكد من أنك خمنت ، هذا يخبر المتصفح بتدوير عنصر div هذا بثلاث درجات.

ومع ذلك ، تجدر الإشارة إلى أن هذه العلامة تعمل فقط في Chrome و Safari. إذا كنت تريد أن تعمل شفرتك في Firefox أو Internet Explorer 9 والإصدارات الأحدث ، فستحتاج إلى تغيير ملف CSS لتضمين الأسطر التالية.

الآن ، عند التمرير فوق الصورة ، يبدو كما يلي:

5.2 استخدام CSS3 لتغيير حجم الصور

لذا ، لماذا تتوقف عند هذا الحد؟ هل تعلم أنه يمكنك أيضًا استخدام طريقة "التحويل" لتكبير الصورة أو تقليصها. دعنا نغير ملف CSS لتضمين الأسطر التالية.

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

كما ترى من الرمز ، سأقوم بزيادة حجم شعار MakeUseOf div بنسبة 50٪. يمكنك اختبار هذا يعمل بالمرور فوقه. سترى أن شعار "MakeUseOf" الآن أصبح أكثر مرونة.

كانت هذه مقدمة لطيفة جدًا لتحويلات CSS3. على الرغم من كون CSS3 جديدًا بالفعل ، يمكنك الآن رؤية أنه يمكنك القيام بالكثير من التلاعبات المثيرة للاهتمام به.

5.3 اختبر نفسك

• كيف نطبق تصميما على عنصر عند التحويم؟
• كيف تقوم بتدوير صورة باستخدام CSS3؟
• كيف تقيس صورة باستخدام CSS3؟
• ماذا يحدث إذا نجحت في طريقة التحويل "ترجمة (50 بكسل ، 50 بكسل)"؟

قراءة متعمقة:

HTML5 Rocks - عرض تقديمي

6. فقط يكفي جافا سكريبت

إذا كنت ترغب في استخدام البرنامج النصي في متصفح الويب الخاص بك ، فيجب عليك استخدامه جافا سكريبت ما هو جافا سكريبت وكيف يعمل؟ [شرح التكنولوجيا] اقرأ أكثر . لا توجد طريقتان حيال ذلك ، للأسف. انه لغة بها الكثير من المعجبين 5 خيارات مكتبة كود جافا سكريبت واسعة النطاق للمطورين اقرأ أكثر والعديد من المنتقدين أيضًا. مع تقدم اللغات ، لديها العديد من الثآليل. هناك سبب يجعل الكتاب الأكثر بروزًا عن اللغة يسمى "Javascript: The Good Parts".

سيكون من المستحيل تعليمك كيفية استخدام جافا سكريبت في فصل واحد. هذا ليس الهدف هنا. الهدف هو تعليمك ما يكفي من Javascript حتى تتمكن من فهم الفصل التالي ، والذي يتعلق باستخدام تقنية تسمى Canvas لعمل الرسومات والرسوم المتحركة.

6.1 الوصول إلى وحدة التحكم

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

من التقليدي أن البرنامج الأول الذي يكتبه أي مطور ناشئ على الإطلاق هو برنامج "Hello World". هذا برنامج بسيط يطبع عبارة "Hello World" ، وليس أي شيء آخر. في وحدة التحكم الخاصة بك ، اكتب "console.log (" Hello world! ") ؛.

6.2 برنامجك الأول

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

6.3 المتغيرات في جافا سكريبت

يمكنك أيضًا تمرير المتغيرات إلى "console.log" أيضًا. تبدو المتغيرات معقدة ، ولكن كل ما هي عليه حقًا هو مساحة لوضع أجزاء كبيرة من المعلومات. غالبًا ما تكون هذه أرقامًا أو أحرفًا. للقيام بذلك ، فأنت تعلن عن متغير باستخدام الكلمة الرئيسية "var" ، وأطلق عليه اسمًا ثم باستخدام علامة يساوي ، فإنك تعطيه قيمة. لذا ، سأقوم بإنشاء متغير يسمى "hello" ثم أعطاه قيمة "Hello World!". سأقوم بعد ذلك بتمرير ذلك إلى وحدة التحكم.

لاحظ كيف لم أنقل "مرحبًا" إلى وحدة التحكم. سجل باستخدام علامات الاقتباس. وذلك لأنني أردت أن أطبع محتويات "مرحبًا" وليس "مرحبًا" على وحدة التحكم نفسها.

6.4 ما تفعله الوظائف

قد يكون الأمر مملاً بعض الشيء إعادة كتابة نفس مجموعة التعليمات البرمجية مرارًا وتكرارًا ، ولهذا السبب نكتب الدالات. الوظائف أسهل مما تعتقد. كل ما هو عبارة عن قطع من التعليمات البرمجية التي يمكننا إعادة استخدامها دون إعادة كتابة نفس الرمز مرة أخرى. أدناه ، أنشأنا دالة تسمى "sup" ونمررها وسيطة باستخدام قوسين يتم تسجيلهما بعد ذلك على الشاشة. نطلق على "sup" من خلال الإرسال إلى وحدة التحكم "sup (" Hello world! ")؛".

6.5 تكرار إجراء بحلقة "For"

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

في هذه الأقواس ، سنرغب في إنشاء متغير يحسب عدد المرات التي قمنا فيها بإجراء. لذا ، نحصل على شيء يشبه هذا "for (var i = 0؛)".

ثم نريد التحقق من عدم استيفائي لشرط ما. لذا ، في هذه الحالة ، نريد أن نرى أنه أقل من 10. لذا ، بعد الفاصلة المنقوطة ، نكتب "i <10". تبدو حلقتنا الآن كما يلي: "for (var i = 0؛ ط <10 ؛).

إذا كان عمري أقل من 10 ، نريد إضافته بواحد ثم القيام بشيء ما. لذا ، نضع "i = i + 1". أوشكت الحلقة على الانتهاء: "for (var i = 0؛ ط <10 ؛ ط = ط + 1) ". لاحظ كيف أن الجزء الأخير ليس به فاصلة منقوطة.

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

آخر بنى برمجة سنتناولها هي عبارة "if" و "while" الحلقات.

6.6 إذا كانت البيانات

تؤدي عبارة "if" إجراءً إذا تم استيفاء معايير معينة. وهي تشبه حلقات "for" في البناء ، وتعمل على النحو التالي. لنفترض أن لديك متغيرًا يسمى "برجر الجبن" وتريد معرفة ما إذا كان يحتوي على قيمة "لذيذ". إذا حدث ذلك ، فأنت تريد تسجيل "yum، cheeseburgers" في الشاشة. للقيام بذلك ، ستكتب شيئًا كهذا.

لاحظ كيف كتبت "if (cheeseburgers ==" tasty ")". يمكنك استخدام تساوي مزدوج أو ثلاثي للتحقق من المساواة وتساوي واحد لتعيين قيمة.

6.7 بينما حلقات

أخيرًا ، تقوم حلقة "while" بتنفيذ إجراء أثناء استيفاء المعايير. لذا ، تخيل أنك تريد تسجيل "لذيذ ، برجر الجبن" بينما برجر الجبن لذيذًا. للقيام بذلك ، ستكتب ما يلي.

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

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

6.8 اختبر نفسك

• أريد العد التنازلي من 30. اكتب حلقة "for" للقيام بذلك.
• أريد إنشاء متغير يسمى "makeuseof" وإعطائه قيمة "رائع". كيف يتم ذلك؟
• أريد إنشاء وظيفة تطبع "MakeUseOf Is Awesome" عند الاستدعاء. اكتب هذه الوظيفة.

قراءة متعمقة:

• "جافا سكريبت: الأجزاء الجيدة" بواسطة دوغلاس كروكفورد
• دليل MDN Javascript

7. لوحة إبداعية

Canvas هي تقنية رائعة تسمح لك برسم صور وإنشاء رسوم متحركة دون الحاجة إلى استخدام Flash أو Silverlight. استخدمه الناس لإنشاء أشياء غريبة ورائعة ، بما في ذلك جهاز محاكاة مجفف الشعر وألعاب الفيديو المختلفة. إنها تقنية رائعة وكبيرة لا يمكن فهمها ، في هذا البرنامج التعليمي ، سأقدم لك مقدمة موجزة عنها.

من الجدير بالذكر أن Canvas تعمل فقط على متصفحات الويب الحديثة. إذا كنت تستخدم إصدارًا قديمًا من IE أو Chrome أو Firefox ، فقد لا تتمكن من متابعة هذا الفصل. إذا كان الأمر كذلك ، يجب أن تفكر في تنزيل أحدث إصدار من Google Chrome ، وهو متصفح الويب الذي أنشأت فيه هذا البرنامج التعليمي.

7.1 الشروع في العمل مع لوحة الرسم

أولاً ، ستحتاج إلى فتح متصفح الويب والانتقال إلى codepen.io. إنشاء قلم جديد.

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

الآن ، سوف نرغب في كتابة بعض رموز جافا سكريبت التي سترسم شيئًا ما على الشاشة. سنبدأ الأساسية وإنشاء مربع أحمر بسيط.

سنقوم بإنشاء متغير (أسميته "عرض") ، ثم حدد عنصر اللوحة القماشية وقم بتعيينه لهذا المتغير. للقيام بذلك ، استخدم document.getElementByID () وقم بتمرير معرف العنصر الذي ترغب في تحديده.

ينشئ السطر الثاني في البرنامج النصي متغيرًا آخر يسمى "السياق" ، ثم يطلق عليه "demo.getContext (" 2d ")" عليه. أخبر هذا المتصفح أننا سنعمل على صورة ثنائية الأبعاد ، ثم نجتاز الوظائف اللازمة التي نحتاج إليها من أجل الرسم على الشاشة.

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

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

7.2 الأشكال والنص

دعنا نحذف السطر الرابع ، ونستبدله بخط يضع مستطيلنا في الزاوية العلوية اليسرى ويمدده على طول قماشنا.

تحدد الوسيطتان الأوليان المكان الذي نرغب فيه في وضع المحور x و y للشكل. لنقم بتعيين هذين على "0" في الوقت الحالي. تشير الوسيطة الثالثة إلى عرض الشكل. فلنقم بتعيين ذلك على "200" ، ثم اترك الوسيطة الرابعة على "50". يجب أن يكون لديك الآن شيء يبدو مثل هذا قليلاً.

هذه بداية رائعة ، لكنها لا تذكر MakeUseOf على الإطلاق. لذا ، سنضيف بعض النص. لنقم بإنشاء متغير يحتوي على "makeuseof" ، وسنسمي هذا المتغير "MakeUseOf".

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

نحن نريد أن يكون نصنا باللون الأزرق وأن نغطي المربع الأحمر. لذا ، تمامًا كما كان الحال من قبل ، سنريد أن نمنحه نمط "أزرق". الآن ، سنختار خصائص نصنا. نريد أن يكون حجمه 20 بكسل ، كبير الحجم ومنسق واستخدام خط Arial. ندعو الخط على السياق 2 ونعينه القيمة "جريئة 20 بكسل arial".

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

تبدو الصورة التي يتم إنتاجها بواسطة الرمز مثل هذا.

7.3 كلمة على قماش

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

7.4 اختبر نفسك

• أضف الشعار التالي إلى الصورة التي أنشأتها: "أفضل موقع إلكتروني على الإطلاق!"
• إنشاء حلقة "for" التي تعمل لمدة عشر مرات. تحقق مما إذا كان يمكنك تحريك الرسم لأسفل على القماش ، بكسل في كل مرة.
• لف الرسم في دالة. ماذا يحدث إذا لم تسميها؟

قراءة متعمقة:

• HTML5 Rocks - دمج اللوحة القماشية في تطبيقات الويب الخاصة بك.
• تريهاوس - كيف ترسم مع قماش

8. حيث المقبل؟

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

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