ابدأ مع HTML5

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

جدول المحتويات

§1 المقدمة





§2 –التوصيف الدلالي



§3 –النماذج





§4 - متوسطة

§5 – CSS3 التحويلات والرسوم المتحركة



§6 – يكفي جافا سكريبت

§7 – Creative Canvas



§8 –إلى أين بعد ذلك؟

1 المقدمة

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



لكن ما هو في الواقع؟

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

HTML5 هو كل ذلك وأكثر. إذن ما الذي يتحدث عنه هذا الكتاب؟

في هذا البرنامج التعليمي HTML5 ، سأفترض أنك قد تطرقت في وقت ما إلى HTML و CSS. ربما تكون قد أنشأت سمة Wordpress الخاصة بك ، أو قمت بتحرير تخطيط MySpace مرة أخرى في اليوم. ربما تكون قد قرأت دليل XHTML الخاص جدًا بـ MakeUseOf. النقطة المهمة هي أنني أفترض أنك تعرف طريقك حول صفحة الويب وأن ما نناقشه في هذا الدليل لن يكون غريبًا جدًا عليك.

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

لماذا تريد تعلم HTML5؟

إنه سؤال عادل. في عالم من الهواتف الذكية والتطبيقات ، هل من المهم حقًا تعلم كيفية برمجة صفحات الويب؟

حسنًا ، صدق أو لا تصدق ، من الشائع حقًا كتابة تطبيقات الهواتف الذكية باستخدام تقنيات HTML5. حتى وقت قريب ، تمت كتابة تطبيق Facebook لنظام Android باستخدام HTML5 و CSS و Javascript.

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

تعمل الهواتف الذكية الجديدة من Firefox OS بالكامل على تطبيقات HTML5 أيضًا. تعد المعرفة العملية بـ HTML5 أمرًا ضروريًا في مناخ الهواتف الذكية اليوم.

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

1.1 المتطلبات الأساسية

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

في Linux ، يختلف محرر النص الافتراضي بين التوزيعات. على Ubuntu ، من المحتمل أن يكون Gedit ، وهو محرر نصوص لطيف لا يختلف كثيرًا عن Notepad.

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

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

الثالثة هي وحدة تحكم Javascript المضمنة في Google Chrome. هذا يسمح لنا بكتابة Javascript ورؤيتها قيد التشغيل على الفور وسيتم استخدامها لشرح مفاهيم البرمجة الأساسية.

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

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

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

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

نجح هذا ، ولكن كان هناك مجال للتحسين. كانت مشكلة العلامات هي أنها لم تكن دلالية. لا تعني Div في الواقع أي شيء ، حقًا.

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

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

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

ما هو الفرق بين التلفزيون والشاشة

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

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

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

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

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

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

2.1 القسم

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

2.2 المادة

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

2.3 جانبا

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

2.4 رأس

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

2.5 التنقل

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

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

2.7 اختبر نفسك

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

3. النماذج

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

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

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

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

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

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

3.1 تحسين النموذج

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

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

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

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

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

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

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

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

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

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

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

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

3.3 اختبر نفسك

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

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

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

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

4. متوسط

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

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

كيفية استخراج الصورة من ملف pdf

بالإضافة إلى ذلك ، كانت تنسيقات ملكية. نتيجة لذلك ، يمكن لمستخدمي 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؟
  • إذا أردت القدرة على إيقاف بعض الصوت مؤقتًا ، فما السمة التي ستضيفها إلى علامة 'الصوت' الخاصة بك؟

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

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

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

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

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

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

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

5.1 تأثيرات تحوم CSS

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

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

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

داخل قاعدة '#muo: hover' ، لدينا سطر يقول '-webkit-transform: 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. يكفي جافا سكريبت

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

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

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

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

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

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

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

6.3 المتغيرات في JavaScript

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

لاحظ كيف لم أنقل كلمة 'hello' إلى console.log باستخدام علامات الاقتباس. هذا لأنني أردت أن أطبع إلى وحدة التحكم محتويات 'hello' وليس 'hello' نفسها.

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

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

6.5 تكرار إجراء مع حلقة 'من أجل'

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

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

ثم نريد التحقق من أنني لم أحقق الشرط. لذلك ، في هذه الحالة ، نريد أن نرى أنه أقل من 10. لذلك ، بعد الفاصلة المنقوطة ، نكتب 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

إذا كان i أقل من 10 ، فنحن نريد إضافته بواحد ثم القيام بشيء ما. لذلك ، نضع 'i = i + 1'. أوشكت الحلقة على الانتهاء: 'for (var i = 0؛ i<10; i = i + 1)'. Note how the last part does not have a semicolon.

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

آخر تركيبتين برمجيتين سنلقي نظرة عليهما هما جمل 'if' و 'while' loops.

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

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

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

6.7 بينما الحلقات

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

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

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

6.8 اختبر نفسك

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

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

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

7. قماش إبداعي

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

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

7.1 بدء استخدام Canvas

بادئ ذي بدء ، ستحتاج إلى فتح متصفح الويب الخاص بك والانتقال إلى codepen.io. قم بإنشاء قلم جديد.

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

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

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

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

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

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

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

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

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

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

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

سنريد أن يكون نصنا باللون الأزرق وأن يتراكب على المربع الأحمر. لذا ، تمامًا كما كان من قبل ، سنريد أن نعطيه نمط ملء من 'الأزرق'. الآن ، سنقوم باختيار خصائص نصنا. نريد أن يكون حجمها 20 بكسل كبيرًا ومنسقًا بخط عريض واستخدام خط Arial. نسمي الخط في Context2 ونخصص له القيمة 'bold 20px arial'.

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

الصورة التي ينتجها الكود تبدو هكذا.

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

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

كيفية تتبع موقع الهاتف الخليوي عن طريق الرقم

7.4 اختبر نفسك

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

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

8. أين بعد ذلك؟

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

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

يشارك يشارك سقسقة بريد الالكتروني هل يستحق الترقية إلى Windows 11؟

تم إعادة تصميم Windows. لكن هل هذا كافٍ لإقناعك بالانتقال من Windows 10 إلى Windows 11؟

اقرأ التالي مواضيع ذات صلة
  • Wordpress & Web Development
  • HTML5
  • وثيقةطويلة
  • دليل Longform
نبذة عن الكاتب ماثيو هيوز(تم نشر 386 مقالة)

ماثيو هيوز هو مطور برامج وكاتب من ليفربول ، إنجلترا. نادرًا ما يتم العثور عليه بدون فنجان من القهوة السوداء القوية في يده ويعشق تمامًا جهاز Macbook Pro وكاميراه. يمكنك قراءة مدونته على http://www.matthewhughes.co.uk ومتابعته على تويتر علىmatthewhughes.

المزيد من Matthew Hughes

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك