تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: الذهاب أبعد من ذلك


الصفحة السابقة

مع انتهاء هذه الدورة ، يكون الإغراء كبيرًا في الاعتقاد بأننا رأينا كل شيء. كل ينظر؟ هل ما زلت لم تصدق ذلك؟ هيا ، لا يزال لديك المئات من الأشياء لاكتشافها ، سواء على HTML أو CSS أو التقنيات ذات الصلة PHP) أو JavaScript ...)

يهدف هذا الفصل إلى تزويدك ببعض التوجيهات لإكمال تعليمك. لذلك لا تحزن ، لأنك لم تنته من صنع الاكتشافات!

من موقع الويب إلى تطبيق الويب (JAVASCRIPT ، AJAX ...)


جافا سكريبت هي لغة موجودة منذ سنوات عديدة وتستخدم بشكل متكرر على الويب بالإضافة إلى HTML و CSS . ربما تكون هذه واحدة من اللغات الأولى التي يجب أن تتعلمها الآن بعد أن أصبحت لديك معرفة بلغة HTML و CSS .

ماذا يمكن أن تقدم جافا سكريبت ؟ ألا نستطيع أن نفعل كل شيء مع HTML و CSS؟

يمكننا بالفعل القيام بالكثير من الأشياء في HTML و CSS ، ولكن عندما نريد أن نجعل صفحتنا أكثر تفاعلية ، فإن لغة مثل JavaScript تصبح لا غنى عنها.

فيما يلي بعض الأمثلة لما يمكن أن تفعله JavaScript :

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

جافا سكريبت هي لغة قريبة من لغات البرمجة مثل C و C ++ و Python و Ruby ... على العكس من ذلك ، فإن HTML و CSS هما لغات وصفية أكثر: يصفان كيفية ظهور الصفحة لكنهما لا يعطيان توجيه الطلبات إلى الكمبيوتر ("قم بذلك ، افعل ذلك ...") ، على عكس JavaScript .

لا علاقة لجافا سكريبت بلغة جافا. فقط أسماء متشابهة.

يتم استخدام JavaScript بشكل منتظم اليوم لإنشاء AJAX (Asynchronous JavaScript And XML) تتيح هذه التقنية تعديل جزء من صفحة الويب التي يستشيرها الزائر من خلال تبادل البيانات مع الخادم. هذا يعطي الانطباع بأن الصفحات أكثر ديناميكية وأكثر استجابة. لم يعد الزائر بحاجة إلى إعادة تحميل الصفحة بأكملها.

أصبحت المتصفحات أكثر كفاءة في التعامل مع جافا سكريبت ، لذلك أصبحت الصفحات التي تستخدم JavaScript أكثر استجابة. يمكننا أن نصل اليوم إلى إنشاء المواقع التي تصبح تطبيقات الويب حرفيا ، أي ما يعادل البرمجيات ولكنها متوفرة في شكل مواقع على شبكة الإنترنت! مثال شهير: مُحرر Docs Google ، google office suite، المتاحة على الويب (الشكل التالي).

css img float

التقنيات المتعلقة بـ HTML5 (CANVAS, SVG, WEBSOCKETS,…)


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

في الواقع ، أصبح HTML5 كلمة تستخدم على نطاق واسع تشير إلى تقنيات أخرى غير HTML عندما يتحدث إليك شخص ما حول "HTML5" اليوم ، فقد يشير أيضًا إلى عناصر أخرى تقع خارج الإطار لـ HTML

فيما يلي قائمة صغيرة من هذه التقنيات الجديدة التي تم تقديمها بالتوازي مع HTML5 (لاحظ أن بعضها ليس "جديدًا" بالفعل ولكنه يعود إلى مقدمة المرحلة):

  • Canvas : يسمح لك بالرسم داخل صفحة الويب ، داخل علامة HTML <canvas> يمكننا رسم أشكال (مثلثات ، دوائر ...) ولكن أيضًا إضافة صور ، والتعامل معها ، وتطبيق عوامل تصفية الرسوم ... في النهاية ، يتيح لنا ذلك أن ندرك اليوم ألعابًا حقيقية وتطبيقات رسومات مباشرة في صفحات الويب.
  • SVG : يسمح لك بإنشاء رسومات متجهة (Vector graphics) داخل صفحات الويب. على عكس Canvas ، يمكن توسيع هذه الرسومات إلى ما لا نهاية (وهذا هو مبدأ المتجه). و البرنامجInkscape هو معروف لتتمكن من رسم SVG .
  • السحب والإفلات (Drag & Drop): قم بسحب وإسقاط الكائنات في صفحة الويب ، تمامًا كما يمكنك سحب وإسقاط الملفات على سطح المكتب. يستخدمه Gmail لإضافة مرفقات بسهولة إلى بريد إلكتروني.
  • ملف API : يسمح بالوصول إلى الملفات المخزنة على جهاز الزائر (بإذنه). سيتم استخدامه خاصةً مع السحب والإفلات.
  • تحديد الموقع الجغرافي : لتحديد موقع الزائر وتقديم الخدمات المتعلقة بالمكان الذي هو فيه (مثل جداول دور السينما القريبة). الموقع ليس دائمًا دقيقًا للغاية ، لكن يمكنه تحديد هوية الزائر لمسافة بضعة كيلومترات (بموافقته).
  • تخزين الويب : يسمح لك بتخزين الكثير من المعلومات حول جهاز الزائر. إنه بديل أكثر قوة لملفات تعريف الارتباط التقليدية. المعلومات هرمية ، كما هو الحال في قاعدة البيانات.
  • Appcache : يسمح لك أن تطلب من المتصفح تخزين بعض الملفات مؤقتًا ، والتي لن يسعى بعد ذلك إلى تنزيلها بانتظام. مفيد جدًا لإنشاء تطبيقات الويب التي يمكن أن تعمل حتى في وضع "غير متصل".
  • Web Sockets : يتيح تبادل أسرع ، في الوقت الحقيقي ، بين متصفح الزائر والخادم الذي يدير موقع الويب (هذا نوع من أجاكس المحسّن). هذا قليل من مستقبل تطبيقات الويب ، التي يمكن أن تصبح سريعة الاستجابة مثل البرامج الحقيقية.
  • WebGL : يسمح بإدخال 3Dفي صفحات الويب ، وذلك باستخدام معيار) OpenGL 3D الشكل التالي.( تتم إدارة المشاهد ثلاثية الأبعاد مباشرةً بواسطة بطاقة الرسومات.

يتم استخدام معظم هذه التقنيات مع JavaScript هذه هي الميزات الجديدة التي يمكن استخدامها في جافا سكريبت.

css webGl

تطبيق ويب ثلاثي الأبعاد باستخدام WebGL

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

مواقع ديناميكية (PHP, JEE, ASP .NET…)


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

ما الفرق الذي يحدثه البرنامج الذي يعمل على جهاز الزائر أو على الخادم؟

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

تُستخدم لغات الخادم لإنشاء صفحة الويب عندما يصل الزائر إلى موقعك (الشكل التالي). لذلك يمكن لكل زائر الحصول على صفحة ويب مخصصة حسب احتياجاتهم!

css webGl

تبادل البيانات مع خادم

اللغات لا تخدم نفس الأشياء ، لكنها تكمل بعضها البعض. إذا قمت بدمج HTML + CSS + JavaScript + PHP ، على سبيل المثال ، يمكنك إجراء AJAX (تبادل البيانات بين الصفحة والخادم) ، يمكنك إجراء العمليات الحسابية وتخزين المعلومات في قواعد البيانات ... باختصار ، جعل مواقع ديناميكية حقيقية!

لغات "جانب الخادم" عديدة. دعنا نذكر البعض منهم:

  • PHP : واحدة من أشهرها. سهلة الاستخدام وقوية ، ويستخدمها Facebook و OpenClassrooms كتبت أيضًا دورة تدريبية عن PHP التي يتبعها الكثير منكم بعد تعلم HTML و CSS !
  • Java EE (Java) : يستخدم على نطاق واسع في العالم الاحترافي ، وهو امتداد للغة Java التي تسمح بمواقع الويب الديناميكية والقوية. في البداية ، يعد التعامل مع PHP أكثر تعقيدًا. لقد قمت بإنشاء دورة على Java EE أيضًا.
  • ASP .NET (C #) : على غرار JEE ، إنها لغة Microsoft . يتم استخدامها مع تقنيات Microsoft الأخرى (Windows Server ...) يستخدم إطار عمل .NET القوي ، والذي يوفر العديد من الميزات.
  • Django (Python) : امتداد للغة Python التي تتيح لك إنشاء مواقع ديناميكية بسرعة وسهولة. ومن المعروف عن إنشاء واجهات إدارية جاهزة للاستخدام. تعلم بايثون أولاً ، ثم توجه Django
  • Ruby on Rails (روبي): امتداد للغة روبي ، يشبه إلى حد بعيد Django ، والذي يسمح بإدراك المواقع الديناميكية بسهولة وبمرونة كبيرة.تعلم أولاً روبي ، ثم اكتشف روبي أون ريلز (هذه الدورة كانت قيد الإعداد عند كتابة هذه السطور)

معرفة واحدة من هذه اللغات أمر ضروري إذا كنت ترغب في معالجة نتيجة أشكال HTML تذكر العلامة <form> : لقد شرحت كيفية إنشاء استمارات ، ولكن ليس كيفية استرداد المعلومات التي أدخلها الزوار. أنت بحاجة إلى لغة خادم ، مثل PHP ، لاسترداد ومعالجة هذه البيانات!

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

  • المنتديات.
  • النشرة الإخبارية.
  • عداد الزوار
  • إدارة العضوية ؛
  • ألعاب الويب (ألعاب استراتيجية ، تربية الحيوانات الافتراضية ...) ؛
  • إلخ

من الضروري معرفة لغات HTML و CSS قبل تعلم لغة الخادم مثل PHP !

اكتشاف جيد!

أنت تعرف الآن كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3 ! في هذه الدورة ، تعلمت:

  • استخدم كود HTML
  • تنظيم صفحة الويب في HTML
  • استخدم كود CSS
  • تنسيق صفحة ويب في CSS
  • تنظيم عناصر صفحة الويب بفضل CSS
  • تغيير تخطيط صفحة HTML باستخدام CSS
  • دمج الصيغ في صفحة الويب
  • تكييف الصفحة للحصول على دقة صغيرة في CSS

ندرك الآن التدريبات الأخيرة للتحقق من صحة كل هذه المهارات!